Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 91在线视频,韩国免费高清一级毛片性色,国产一区二区影院 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          使用HTML添加表格1（基本元素）-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          
        
           
          
	
	
          
		
                        
          格元素詳解與練習(xí)
          提到表格，大家最先想到的就是EXCEL這款軟件，實(shí)際上在對(duì)表格的操作上，HTML與EXCEL非常相似。
          在展示數(shù)據(jù)，統(tǒng)計(jì)數(shù)據(jù)方面，表格比文字描述更具表達(dá)優(yōu)勢(shì)，在網(wǎng)頁(yè)中，表格也經(jīng)常被用來(lái)展示數(shù)據(jù)、計(jì)劃日常安排等內(nèi)容。如圖所示：
          今天我們就來(lái)學(xué)習(xí)一下如何向頁(yè)面中添加表格元素。
          首先來(lái)介紹一下表格元素中的基本標(biāo)簽。
          NO.1：<table></table>
          這個(gè)標(biāo)簽是書(shū)寫(xiě)表格的第一個(gè)標(biāo)簽，它本身在頁(yè)面上看不出什么內(nèi)容，但是它的屬性可以控制表格顯示的全局樣式。這個(gè)標(biāo)簽的開(kāi)始標(biāo)簽寫(xiě)在表格元素的開(kāi)頭，結(jié)尾標(biāo)簽寫(xiě)在表格元素的結(jié)尾。
          NO.2：<caption></caption>
          這個(gè)標(biāo)簽是表格的標(biāo)題標(biāo)簽。
          NO.3：<tr></tr>
          這個(gè)標(biāo)簽定義表格的列標(biāo)簽。
          NO.4：<th></th>
          這個(gè)標(biāo)簽是列表標(biāo)題標(biāo)簽，例如，男生、女士、姓名等。
          NO.5：<td></td>
          這個(gè)標(biāo)簽定義表格的行標(biāo)簽。
          OK，這些基本標(biāo)簽就可以構(gòu)建一個(gè)基礎(chǔ)的表格元素。示例代碼如下：
          <table><!-- 寫(xiě)在表格元素的開(kāi)頭 --><caption>表格標(biāo)題</caption><!-- 表格標(biāo)題 --><tr>標(biāo)題標(biāo)簽<th>姓名</th><!-- 標(biāo)題標(biāo)簽 --><th>年齡</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 寫(xiě)在表格元素的結(jié)尾 -->
          頁(yè)面效果如圖所示：沒(méi)有表格的外邊框。
          如何添加外邊框呢？在<table>標(biāo)簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。
          <table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->
          效果如圖所示：
          這時(shí)，您會(huì)發(fā)現(xiàn)表格在頁(yè)面上的尺寸非常小，可不可以按照頁(yè)面尺寸來(lái)顯示表格嗎？當(dāng)然可以，這就需要為<table>標(biāo)簽修改第二個(gè)屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。
          <table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->
          效果如圖所示：
          ok！今天的講解先到這里，明天我會(huì)繼續(xù)為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個(gè)標(biāo)簽，以及合并單元格操作。
          今天的完整代碼示例如下：
          <!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個(gè)網(wǎng)頁(yè)</title>
</head> 
<body><h1>第一個(gè)網(wǎng)頁(yè)</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格標(biāo)題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>
          正所謂萬(wàn)丈高樓平地起，html技術(shù)雖然簡(jiǎn)單，但是內(nèi)容相對(duì)繁瑣，也是以后進(jìn)一步學(xué)習(xí)網(wǎng)頁(yè)制作的基礎(chǔ)，希望大家動(dòng)手寫(xiě)每一段代碼，把每一步踩堅(jiān)實(shí)。
          喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
          HTML完整學(xué)習(xí)目錄
          HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
          TML 表格實(shí)例:
          First NameLast NamePoints
          JillSmith50
          EveJackson94
          JohnDoe80
          AdamJohnson67
          在線實(shí)例
          表格
          這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。
           HTML 表格
          表格由 <table> 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
          表格實(shí)例
          <table border="1">
          <tr>
          <td>row 1, cell 1</td>
          <td>row 1, cell 2</td>
          </tr>
          <tr>
          <td>row 2, cell 1</td>
          <td>row 2, cell 2</td>
          </tr>
          </table>
          在瀏覽器顯示如下：:
          row 1, cell 1row 1, cell 2
          row 2, cell 1row 2, cell 2
           HTML 表格和邊框?qū)傩?/p>
          如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。
          使用邊框?qū)傩詠?lái)顯示一個(gè)帶有邊框的表格：
          <table border="1">
          <tr>
          <td>Row 1, cell 1</td>
          <td>Row 1, cell 2</td>
          </tr>
          </table>
           HTML 表格表頭
          表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
          大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：
          <table border="1">
          <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          </tr>
          <tr>
          <td>row 1, cell 1</td>
          <td>row 1, cell 2</td>
          </tr>
          <tr>
          <td>row 2, cell 1</td>
          <td>row 2, cell 2</td>
          </tr>
          </table>
          在瀏覽器顯示如下：
          Header 1Header 2
          row 1, cell 1row 1, cell 2
          row 2, cell 1row 2, cell 2
          更多實(shí)例
          沒(méi)有邊框的表格
          本例演示一個(gè)沒(méi)有邊框的表格。
          表格中的表頭(Heading)
          本例演示如何顯示表格表頭。
          帶有標(biāo)題的表格
          本例演示一個(gè)帶標(biāo)題 (caption) 的表格
          跨行或跨列的表格單元格
          本例演示如何定義跨行或跨列的表格單元格。
          表格內(nèi)的標(biāo)簽
          本例演示如何顯示在不同的元素內(nèi)顯示元素。
          單元格邊距(Cell padding)
          本例演示如何使用 Cell padding 來(lái)創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
          單元格間距(Cell spacing)
          本例演示如何使用 Cell spacing 增加單元格之間的距離。
           HTML 表格標(biāo)簽
          標(biāo)簽描述
          <table>定義表格
          <th>定義表格的表頭
          <tr>定義表格的行
          <td>定義表格單元
          <caption>定義表格標(biāo)題
          <colgroup>定義表格列的組
          <col>定義用于表格列的屬性
          <thead>定義表格的頁(yè)眉
          <tbody>定義表格的主體
          <tfoot>定義表格的頁(yè)腳
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
          篇講了CSS，知道CSS是用來(lái)控制HTML元素的表現(xiàn)樣式的。今天就來(lái)實(shí)踐一下，相信你經(jīng)常會(huì)在網(wǎng)頁(yè)里看到表格，看CSS如何來(lái)控制表格元素（<table>）的樣式的。
          網(wǎng)頁(yè)中的表格<table>
          用過(guò)Excel的應(yīng)該都很容易理解表格這個(gè)概念，無(wú)非就是行、列、單元格等。網(wǎng)頁(yè)中的表格也是這樣，只不過(guò)是使用HTML代碼來(lái)表現(xiàn)的，<table></table>是表格的殼，<tr></tr>是表格內(nèi)部的行，<td></td>是表格中的單元格，代碼是這樣寫(xiě)的：
          <!DOCTYPE html>
<html>
<head>
<title>我的第一個(gè)表格</title>
</head>
<body>
<table border="1">
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
<tr>
 <td>大超</td>
 <td>男</td>
</tr>
</table>
</body>
</html>

          通過(guò)上面的代碼可以看出，<tr>標(biāo)簽包含在<table></table>里面，<td>標(biāo)簽又包含在<tr></tr>里面。也就是說(shuō)表格要先有一個(gè)外殼<table></table>，然后需要在里面放進(jìn)去行<tr></tr>，再在行里面放進(jìn)去單元格<td></td>，最后在單元格里面放內(nèi)容。上面的代碼中有兩組<tr>，說(shuō)明是兩行，每行里面又有兩組<td>，說(shuō)明每行有兩個(gè)單元格，也就是兩列，這就形成一個(gè)兩行兩列的表格了。
          表格的屬性
          常用的有以下幾個(gè)：
          • width：寬度
          • height：高度
          • border：邊框?qū)挾?/li>
          • cellspacing：?jiǎn)卧裰g的間隔
          • cellpadding：?jiǎn)卧駜?nèi)部文字與單元格表框的間隔
          如何用CSS控制表格
          如果你想控制表格的寬度，代碼就是table {width:500px;}。如果你想控制表格的邊框?qū)挾染褪莟able {border:1px;}。甚至還可以加上邊框顏色table {solid red 1px;}，“solid”是實(shí)線的意思，當(dāng)然還有虛線。
          在CSS里面，直接給table這個(gè)元素定義樣式時(shí)，網(wǎng)頁(yè)內(nèi)所有的table都會(huì)變成你所定義的樣子。人人都希望個(gè)性化，表格也一樣，單獨(dú)把某個(gè)表格設(shè)置一種樣式時(shí)怎么辦呢？這就用到自定義樣式，如果你想給某個(gè)table單獨(dú)設(shè)置一種樣式，你先要給樣式起個(gè)名字，比如：gexing，在CSS里面是這樣寫(xiě)的“.gexing{solid red 5px;}”，然后在table里面加個(gè)class：<table class="gexing">，哪個(gè)表格想用這個(gè)樣式就在哪個(gè)表格里加上這個(gè)class，可以重復(fù)使用。
          不過(guò)看著上面這個(gè)表格有點(diǎn)難看啊，我在網(wǎng)上看到的表格都是細(xì)細(xì)的邊框，你這個(gè)表格的邊框怎么還有兩條線？這個(gè)問(wèn)題是個(gè)好問(wèn)題，你說(shuō)的是不是下圖的最后一個(gè)？
          這個(gè)就當(dāng)作業(yè)吧，看看你能不能做出來(lái)。如果做不出來(lái)，可以關(guān)注公眾號(hào)“大超小志”發(fā)送“大超教你建網(wǎng)站6”收取本節(jié)課全部代碼，有不懂的可以在公眾號(hào)留言。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲中文字幕久久久一区|
国产伦精品一区二区免费
|
国产一区二区精品久久91|
区三区激情福利综合中文字幕在线一区亚洲视频1
|
91福利视频一区|
国产一区三区三区|
精品乱人伦一区二区|
无码一区二区三区在线
|
秋霞鲁丝片一区二区三区|
在线精品一区二区三区|
日本成人一区二区三区|
在线观看午夜亚洲一区|
国产精品亚洲综合一区|
狠狠色婷婷久久一区二区三区|
国产一区二区三区樱花动漫|
性色AV一区二区三区天美传媒|
99久久无码一区人妻a黑|
日韩人妻无码一区二区三区99|
夜夜添无码试看一区二区三区|
东京热人妻无码一区二区av|
丰满人妻一区二区三区视频53
|
精品视频一区二区三区四区|
亚洲一区二区三区精品视频
|
国产精品区AV一区二区|
国产剧情一区二区|
日韩A无码AV一区二区三区|
国产精品一区二区三区久久
|
国产色欲AV一区二区三区|
在线免费观看一区二区三区|
韩国精品一区二区三区无码视频
|
国产一区二区在线|播放|
国产一区二区三区在线看片|
国产传媒一区二区三区呀|
国产一区二区三区免费在线观看|
精品国产一区二区三区久
|
久久伊人精品一区二区三区
|
中文字幕一区二区三区视频在线|
日韩人妻无码一区二区三区综合部
|
人妻互换精品一区二区|
无码一区二区三区亚洲人妻|
国产在线精品一区二区在线看|