创建表格代码

 <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>表格</title>
  </head>
  <body>
<!-- 在HTML中，使用table标签来创建一个表格 -->
<table border="1" width="40%" align="center">
    <!-- 在table标签中使用tr来表示表格中的一行，有几行就有几对tr -->
    <tr>
        <!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <!-- rowspan用来设置纵向的合并单元格 -->
        <td rowspan="2">B4</td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>D1</td>
        <td>D2</td>
        <!-- colspan横向的合并单元格 -->
        <td colspan="2">D3</td>
    </tr>
</table>
</body>
</html>

如图：

选区_040.png

table{
设置表格的宽度
width: 300px;

居中
margin: 0 auto;

边框
border:1px solid black;

table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-spacing: 10px;

border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
border-collapse: collapse;

设置背景样式
background-color: #bfa;
}
设置边框
th, td{
border: 1px solid black;
}
设置隔行变色
tbody > tr:nth-child(even){
background-color: #bfa;
}

鼠标移入到tr以后，改变颜色
tr:hover{
background-color: yellow;
}

效果图：

选区_041.png

长表格

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头(内容永远会显示在表格的头部)
tbody 表格主体(内容永远会显示在表格的中间)
tfoot 表格底部(内容永远会显示在表格的底部)

tr需要写在这些标签当中

如果表格中没有写tbody，浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中。
注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行需要通过tbody > tr

表格布局

表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格

    <html lang="en">
    <head>
<meta charset="UTF-8">
<title>表格的布局</title>
  </head>
  <body>

<table border="1" width="100%">
    <tr height="100px">
        <td colspan="2"></td>
    </tr>
    <tr height="400px">
        <td width="20%"></td>
        <td width="80%">
            <table border="1" width="100%" height="100%">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr height="100px">
        <td colspan="2"></td>
    </tr>
</table>
  </body>
  </html>

效果图：

选区_042.png

表格

长表格

表格布局

推荐阅读更多精彩内容