table標籤,認識網頁上的表格

有時候我們需要在網頁上展示一些數據,如某公司想在網頁上展示公司的庫存清單。如下表:

想在網頁上展示上述表格效果可以使用以下代碼:

創建表格的四個元素:

table、tbody、tr、th、td

1、<table>…</table>:整個表格以<table>標記開始、</table>標記結束。

2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加載完後才顯示。加上這些表格結構, tbody包含行的內容下載完優先顯示,不必等待表格結束後在顯示,同時如果表格很長,用tbody分段,可以一部分一部分地顯示。(通俗理解table 可以按結構一塊塊的顯示,不在等整個表格加載完後顯示。)

 

3、<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。

4、<td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列。

5、<th>…</th>:表格的頭部的一個單元格,表格表頭。

6、表格中列的個數,取決於一行中數據單元格的個數。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>認識table表標籤</title>
</head>
<body>
<table>
  <tbody>
    <tr>
      <th>班級</th>
      <th>學生數</th>
      <th>平均成績</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
        <td>三班</td>
        <td>32</td>
        <td>80</td>
    </tr>




  </tbody>
</table>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章