表格

文章目录

• 表格
• • 常用属性
  • 表格的样式
  • • 大小
    • 对齐
    • 边框之间的距离
    • 用伪元素美化表格

<table>
    <tr>			<!--一个tr为一行-->
       <td></td> 	<!--一个td为一个单元格-->
        <td colspan="2"></td><!--横向合并单元格-->
        <td rowspan="2"></td><!--纵向合并单元格-->
    </tr>
</table>

常用属性

• thead、tbody、tfoot

  • 不管在源码中怎么写，在网页中的显示的顺序都会是

    thead
    tbody
    tfoot

  • 若表格中没有使用tbody，那么浏览器会自动创建一个tbody并将所有tr放于tbody中；所以tr不是table的子元素

• th 可表示头部的单元格（加粗、居中）

<table>
    <thead>			<!--头部-->
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>			<!--主体-->
        <tr></tr>
        <tr></tr>
    </tbody>
    <tfoot>			<!--底部-->
        <tr></tr>
    </tfoot>
</table>

表格的样式

大小

width:100%;
height:50px;

对齐

td{					/*默认情况下，td是垂直居中的*/
    vertical-align:middle;	/*垂直方向文字*/
    text-align: center;		/*水平方向文字*/
}

边框之间的距离

border-spacing:0px;			/*边框之间的距离*/
border-collapse:collapse;	/*边框的合并*/

用伪元素美化表格

tr:nth-child(odd){/*单数行变色*/
    background-color:#bfa;
}
tr:hover{/*鼠标悬停时表格变色*/
    background-color:#f5f5f5;
}