美文网首页
HTML之表格 · Table

HTML之表格 · Table

作者: _chuuuing_ | 来源:发表于2016-10-18 17:37 被阅读0次

○ ○ ○ ○ ○ ○ 标签 ○ ○ ○ ○ ○ ○

<table>
    <caption>...</caption>    <!--表格标题-->
    <tr>    <!--表格头-->
      <th>...</th>    
      <th>...</th>
    </tr>  
    <tr>    <!--第一行数据-->
      <td>...</td>    
      <td>...</td>
    </tr>  
    <tr>    <!--第二行数据-->
      <td>...</td>    
      <td>...</td>
    </tr>  
</table>

⚠️ 注意：<td>是个容器，可以装html中所有的元素，比如文字／text，图片／img，列表／list，表格／table

○ ○ ○ ○ ○ ○ 属性 ○ ○ ○ ○ ○ ○

（1）border 边框
－ 无边框，``
－ 给表格 & 单元格 都加上单独的边框

table, th, td {
    border: 1px solid black;
}
单独边框

－ 表格 & 单元格 边框的合并

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
边框的合并

（2）border-spacing 适用于<table>，增加border之间的距离：

border-spacing

（3）padding 适用于<td>和<th>，增加填充
（4）colspan="N"和rowspan="N" 合并N行 和 合并N列
（5）table使用特定的ID选择器：
－ 装饰整个表格 <table id="t01"> 和CSS代码 table#t01 {...}
－ 装饰奇数行 table#t01 tr:nth-child(odd){...}
－ 装饰偶数行 table#t01 tr:nth-child(even){...}
⚠️ 注意：标题行算第1行

相关文章