HTML标签---表格

表格分成行，但是无列，行内分为单元格。

大框架
行
单元格
表头
主体
样式：cellspacing=”0”//设置单元格与单元格边框之间的空白距离
cellpadding=”0”//设置单元格与单元格之间的距离
三参为零：border cellspacing cellpadding

<table width="数字" border="数字">
    <caption></caption>//表格标题例如：班级统计表
    <tr>
        <th></th>//表头标签：加粗并居中，例如：性别，姓名
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

合并单元格
跨行合并：rowspan
跨列合并：colspan
例如：跨行合并：

<td rowspan="数字"></td>
<td colspan="数字"></td>(数字代表合并了几个)

注意
合并之后需要删除多余的单元格
原则：先上后下，先左后右。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今日小说排行榜</title>
    <style>
        th{
            color: blue;
        }
        td{ 
            color: yellow; font-size: 14px;
        }
        th{
            height: 50px;
        }

    </style>
</head>
<body>
    <table border="2" cellpadding="0" cellspacing="0" width="500" align="center">
        <caption><h3>小说排行榜</h3></caption>
        <thead>
            <th>排行</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>香广连接</th>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="boy.jpg" /></td>
                <td>肯德基</td>
                <td>决定是否看见</td>
                <td>决定是否看见</td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="boy.jpg" /></td>
                <td>地方vgfd</td>
                <td>地方vgfd</td>
                <td>地方vgfd</td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="boy.jpg" /></td>
                <td>肥嘟嘟</td>
                <td>肥嘟嘟</td>
                <td>肥嘟嘟</td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="boy.jpg" /></td>
                <td>发的都是</td>
                <td>发的都是</td>
                <td>发的都是</td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="boy.jpg" /></td>
                <td>发多少多少</td>
                <td>发多少多少</td>
                <td>发多少多少</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

猜你喜欢