HTML table表格結構

admin發表於2018-08-13
HTML

表格基本上有如下幾個標籤構成:

（1）.<table>標籤用來建立表格的外部框架。

（2）.<tr>標籤用來建立表格的行。

（3）.<th>標籤用來建立表頭單元格。

（4）.<td>標籤用來建立tr行中的單元格。

（5）.<caption>標籤用來建立標題。

（6）.<thead>標籤用來建立表格的表頭。

（7）.<tbody>標籤用來建立表格的主體部分。

（8）.<tfoot>標籤用來建立表格的頁尾。

一.基本應用程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>   
</head> 
<body> 
<table border="1">
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
</table>
</body> 
</html>

上面的程式碼建立一個三行表格，每一行具有三個單元格。

table的border屬性用來設定表格的邊框，預設值為0，也就是不具有邊框。

border="1"表示表格邊框的寬度是1px，border="2"表示邊框寬度為2px，以此類推。

二.<caption>標籤:

此標籤用來定義表格的標題，放在表格之內，且緊鄰起始<table>標籤。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
</head> 
<body> 
<table border="1"> 
  <caption> 螞蟻部落</caption> 
  <tr> 
    <td>css教程</td> 
    <td>HTML教程</td> 
  </tr> 
  <tr>
    <td>JS教程</td>
    <td>正則教程</td>
  </tr> 
</table> 
</body> 
</html>

每個表格只能夠有一個表格標題；預設情況下，標題會一直在表格頭部並且居中。

三.<thead>、<tbody>和<tfoot>標籤:

這三個標籤實現了表格的語義化佈局，這樣表格所組織的內容結構就更加清晰。

假如，有一個表格，希望對其中的內容進行分組:

（1）.一行能夠起到表格標題的作用。

（2）.一些行是表格的主要資料。

（3）.最後一行位於表格最底部的總結型別的行。

上面的要求就可以使用這三個標籤進行實現。

還有一個技巧，就是將三個標籤以<thead>、<tfoot>和<tbody>順序排列，那麼表格展現的時候出現的順序會和三個標籤的排列順序一樣；<tbody>中的資料可能會很大，導致資料表格載入延遲，但是因為已經顯示了表格的頭部和尾部，一定程度提高了網頁的友好度，還有在列印的時候，可能表格中的資料非常的長，需要多張列印紙，這個時候表格頭部和尾部內容會出現在每一張列印紙上。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<body>
<table border="1">
  <thead>
    <tr>
      <th>螞蟻部落版塊</th>
      <th>螞蟻部落的目的</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>2個版塊</td>
      <td>免費教材和交流</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>div+css</td>
      <td>div+css免費教材和交流</td>
    </tr>
    <tr>
      <td>html專區</td>
      <td>html免費教材和交流</td>
    </tr>
  </tbody>
</table>
</body>
</html>

<thead>行中沒有使用<td>單元格，而是使用<th>，當然這也是語義化佈局的一部分；<th>其實是一個特殊的<td>單元格，唯一的區別就是<th>中的字型會預設加粗。

相關文章