Files
freeCodeCamp/guide/chinese/html/tables/index.md
yulixue 6167811c09 Update index.md (#28398)
Add some details about table, and the css property: border.
2019-06-25 16:22:17 +08:00

1.8 KiB
Raw Blame History

title, localeTitle
title localeTitle
Tables 表格

定义HTML表格

<table>定义HTML表格。

表格由行<tr>组成,行由单元格组成。单元格可以分为标题单元格<th>和数据单元格<td>。默认情况下,标题单元格为粗体且居中。

更复杂的HTML表格还可能包含<caption> <col> <colgroup> <thead> <tfoot><tbody>元素。

给表格添加边框

表格的默认格式是没有边框的。

添加边框需要用到CSS的border属性:

table, th, td {
    border: 1px solid black;
}

简单的表格示例


<table style="width:100%"> 
  <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Age</th> 
  </tr> 
  <tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
  </tr> 
  <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
  </tr> 
 </table> 

DEMO

表示具有更多语义信息的示例


<!DOCTYPE html> 
    <html> 
    <body> 
       <table> 
      <thead> 
        <tr> 
          <th>Item</th> 
          <th>Amount</th> 
        </tr> 
      </thead> 
      <tfoot> 
        <tr> 
          <td>Apple</td> 
          <td>10</td> 
        </tr> 
      </tfoot> 
      <tbody> 
        <tr> 
          <td>Peach</td> 
          <td>15</td> 
        </tr> 
        <tr> 
          <td>Watermelon</td> 
          <td>3</td> 
        </tr> 
      </tbody> 
    </table> 
    </body> 
   </html> 

结果 Item Amount

Apple 10

项目 数量
苹果 10
桃子 15
西瓜 3

更多信息:

关于HTML的MDN文章 标签