HTML中的表格

作者: 潇洒的小老虎 | 来源:发表于2018-04-21 21:18 被阅读0次

前端编程之路一一表格标签table
HTML中的表格
Html中的表格
HTML基础10--表格的使用
HTML表格
表格
用 Python 生成 HTML 表格
HTML,HTML5标签
HTML表格-13
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>