HTML中的表格

<!--cellspacing 单元格和单元格之间的距离-->
<!--cellpadding 单元格内容距离单元格边框的距离-->
<table width="500" border="1" align="center" cellspacing="10" cellpadding="10">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>电话</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>女</td>
        <td>110</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>男</td>
        <td>120</td>
    </tr>
</table>

一般情况下设置三参为0

border cellpadding cellspacing 为0

表头单元格

<tr>
    <th>姓名</th>
    <th>性别</th>
    <th>电话</th>
</tr>

表格标题

紧跟table标签之后

<table>
    <caption>我是表格标题</caption>
</table>

案例今日小说排行榜

<table border="1" cellpadding="0" width="550" cellspacing="0">
    <caption>今日小说排行榜</caption>
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>↑</td>
        <td>321</td>
        <td>123</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>↑</td>
        <td>321</td>
        <td>123</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>↑</td>
        <td>321</td>
        <td>123</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>↑</td>
        <td>321</td>
        <td>123</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>↑</td>
        <td>321</td>
        <td>123</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>

表格划分

<table border="1" cellpadding="0" width="550" cellspacing="0">
    <caption>今日小说排行榜</caption>
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>↑</td>
            <td>321</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>↑</td>
            <td>321</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>↑</td>
            <td>321</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>↑</td>
            <td>321</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>↑</td>
            <td>321</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
    </tbody>
</table>

合并单元格

1.跨列合并
colspan
2.跨行合并
rowspan