CSS table标签

一、标签定义

一个完整的table包含thead、tbody、tfoot这些语义化标签，方便对表格中的行进行分组，这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。

其中
th(table head) 一般用于定义表头，也可用于定义单元格，文本会默认加粗
tr(table row) 定义表格中的行
td(table data) 定义表格中的单元格

    <table>
    	<!-- 表头部-->
        <thead>
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <!-- 表格主体内容 -->
        <tbody>
            <tr>
                <td>一班</td>
                <td>诸葛亮</td>
                <td>89</td>
            </tr>
            <tr>
                <td>二班</td>
                <td>孙悟空</td>
                <td>99</td>
            </tr>
        </tbody>
        <!-- 表尾部 -->
        <tfoot>
            <tr>
                <td>其他</td>
                <td>无</td>
                <td>无</td>
            </tr>
        </tfoot>
    </table>

二、table标签中属性的使用

属性名	说明
border	设置表格的边框（默认border="0"无边框）有边框时，默认的边框颜色为gray
cellspacing	设置单元格与单元格边框之间的空白间距（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距（默认为1像素）
width	设置表格的宽度
height	设置表格的高度
align	设置表格在网页中的水平对齐方式left/center/right（默认left）

border

我们给上述表格添加border属性

<table border="1"></table>

<table border="10"></table>

cellspacing

我们给上述表格添加cellspacing属性

<table cellspacing="20"></table>

加上border="1"看看效果

<table border="1" cellspacing="20"></table>

cellpadding

我们给上述表格添加cellpadding属性

<table cellpadding="20"></table>

加上border="1"看看效果

<table border="1" cellpadding="20"></table>

三、注意点

1.一般我们设置cellpadding属性为0，并给单元格内容td标签设置css样式padding达到理想效果。

2.一般情况下，我们可以不使用thead、tbody、tfoot这些语义化标签，直接使用tr配合th和td实现表格。

3.一般我们设置cellspacing和cellpadding属性为0，并设置边框border属性为1。

<table border="1" cellspacing="0" cellpadding="0"></table>

效果图：

我们发现边框的宽度有点不对劲，有重合的迹象，此时添加下面的样式

	table {
		border-collapse: collapse;
	}

效果图：

美化

        table {
            border-collapse: collapse;
            border-color: #e8e8e8;
        }
        th {
            color: #333;
            background-color: #E0EEFF;
        }
        th, td {
            padding: 12px 20px;
        }
        td:hover {
            background-color: #f5f5f5;
        }

效果图：

四、单元格合并

1. colspan 合并列

    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <th>姓名</th>
            <td></td>
            <th>性别</th>
            <td></td>
            <th>年龄</th>
            <td></td>
            <th>民族</th>
            <td></td>
        </tr>
        <tr>
            <th>毕业学校</th>
            <td colspan="4"></td>
            <th>学历</th>
            <td colspan="2"></td>
        </tr>
        <tr>
            <th>身份证号码</th>
            <td colspan="7"></td>
        </tr>
        <tr>
            <th>家庭住址</th>
            <td colspan="7"></td>
        </tr>
    </table>

2.rowspan 合并行

天地生两极 两极生四象 四象生八卦

    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td rowspan="2">天地</td>
            <td>两级</td>
        </tr>
        <tr>
            <td>两级</td>
        </tr>
    </table>

    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td rowspan="4">天地</td>
            <td rowspan="2">两级</td>
            <td>四象</td>
        </tr>
        <tr>
            <td>四象</td>
        </tr>
        <tr>
            <td rowspan="2">两级</td>
            <td>四象</td>
        </tr>
        <tr>
            <td>四象</td>
        </tr>
    </table>

<table border="1" cellspacing="0" cellpadding="0">
        <tr>							<!-- 第一行 -->
            <td rowspan="8">天地</td>	<!-- 第一列"天地"占8行 -->
            <td rowspan="4">两级</td>	<!-- 第二列"两级"占4行 -->
            <td rowspan="2">四象</td>	<!-- 第三列"四象"占2行 -->
            <td>八卦</td>				<!-- 第四列"八卦"占1行 即一个单元格-->
        </tr>
        <tr>
            <td>八卦</td>
        </tr>
        <tr>
            <td rowspan="2">四象</td>
            <td>八卦</td>
        </tr>
        <tr>
            <td>八卦</td>
        </tr>
        <tr>
            <td rowspan="4">两级</td>
            <td rowspan="2">四象</td>
            <td>八卦</td>
        </tr>
        <tr>
            <td>八卦</td>
        </tr>
        <tr>
            <td rowspan="2">四象</td>
            <td>八卦</td>
        </tr>
        <tr>
            <td>八卦</td>
        </tr>
    </table>

3.结合使用

    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="4">王者荣耀英雄说明</td>
            <td>备注</td>
        </tr>
        <tr>
            <td rowspan="2">位置/性别</td>
            <td colspan="3">常用位置</td>
            <td rowspan="6">当前排位赛最火</td>
        </tr>
        <tr>
            <td>射手</td>
            <td>法师</td>
            <td>打野</td>
        </tr>
        <tr>
            <td rowspan="2">男英雄</td>
            <td>后裔</td>
            <td>诸葛亮</td>
            <td>百里玄策</td>
        </tr>
        <tr>
            <td>鲁班七号</td>
            <td>周瑜</td>
            <td>裴擒虎</td>
        </tr>
        <tr>
            <td rowspan="2">女英雄</td>
            <td>公孙离</td>
            <td>武则天</td>
            <td>露娜</td>
        </tr>
        <tr>
            <td>孙尚香</td>
            <td>小乔</td>
            <td>娜可露露</td>
        </tr>
    </table>