HTML表格

最新推荐文章于 2019-10-29 20:55:34 发布

原创最新推荐文章于 2019-10-29 20:55:34 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

表格在HTML十分重要，也很常用，用div标签很难去替代表格。
标签：<table>…完整代码见示例</table>
作用：布局，呈现需要表格布局的内容
贴士：(1)表格标签是块级元素
(2)全页布局的作用已经退出舞台了
(3)专注于自己应该专注的布局领域
(4)表格样式一般用css来定义很少使用自己的属性

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table>
        <tr>
            <!--带表格头-->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>aa</td>
            <td>bb</td>
        </tr>
    </table>
</body>
</html>

这里定义学号，姓名，性别为表头，效果如下：
在这里插入图片描述
如何将表格写的更加规范一点呢？也就是说表头归表格写在一起，表格体和表格体写在一起。、
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table>
        <!--放表格头-->
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>总分</th>
            </tr>
        </thead>
        <!--放尾注-->
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>800</td>
            </tr>
        </tfoot>
        <!--放表格体-->
        <tbody>
            <tr>
                <td>200</td>
                <td>aa</td>
                <td>400</td>
            </tr>
            <tr>
                <td>300</td>
                <td>bb</td>
                <td>400</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果如下：
在这里插入图片描述

重要知识点
边框问题：border
单元格间距：cellspacing
单元格边距：cellpadding
单元格跨列：colspan
内容对齐：align

上面的这些可以用来修改表格的边框，长度以及居中这一系列问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--设置表格边框，0是没有边框，从1开始出现边框，数值越大，边框外围越粗-->
    <!--cellspacing = 0是用来消除表格边框的间距-->\
    <!--cellpadding消除内边距-->
    <table align="center" border="1" cellspacing="0">
        <tr align="center">
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tbody align="center">
            <tr>
                <td>1</td>
                <td>a</td>
                <!--设置单元格跨行，想占几个单元格就设置为几，是从上到下-->
                <td rowspan="2">man</td>
            </tr>
            <tr>
                <td>2</td>
                <td>b</td>
            </tr>
            <tr>
                <!--设置单元格跨列，想占几个单元格就设置为几，是从左往右-->
                <td colspan="3">按钮</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

产生效果：
在这里插入图片描述
可以看出表格出现了边框，而且表格中所有的字体都居中，而且还出现跨列，跨行的情况。