html自学笔记6——表格

啤酒我可以喝一件

于 2018-01-06 21:02:19 发布

阅读量196

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zouxu634866/article/details/78991465

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：表格元素是html中的重要的内容，这一节将制作一个表格的每一步骤记录下来

第一步：建立一个大的框架

像word里面一样，在新建一个表格的时候，你要先选择是几x几的。
代码：

    <table border="3">
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    </table>

说明：
1.table标签就是表格。border属性是用来设定表格边框的宽度
2.tr标签是设定行用的，比如你要设定三行，就先写三个

<tr></tr>
<tr></tr>
<tr></tr>

接着，比如你又要设定为三列，你就要在每行里面加入三列，列就是td，在td里面写的就是表格的内容

        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>

到这里，大的框架就完成了
这里写图片描述

第二步：设定标题行

我们知道，一个表格的第一行通常为一个标题行，里面的内容通常为加粗居中的，于是用th标签，注意，th要放在tr里面

<tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>

这里写图片描述

第三步：横向合并不要的单元格

在要合并的位置（td处）用td的属性colspan

        <tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>
        <tr><td colspan="2">单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>

这里写图片描述

注意：colspan=2表示将包括该处的格子和后面的总共2个格子合并，因此要将后面被合并的格子的代码删掉

第三步：纵向合并不要的单元格

在要合并的位置（td处）用td的属性rowspan

        <tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>
        <tr><td colspan="2">单元格</td><td>单元格</td></tr>
        <tr><td rowspan="2">单元格</td><td>单元格</td><td>单元格   </td></tr>
        <tr><td>单元格</td><td>单元格</td></tr>

这里写图片描述

注意：rowspan=2表示将包括该处的格子和下面的总共2个格子合并，因此要将下面被合并的格子的代码删掉

第四步：给表格加个标题

用caption标签，写在table标签里面，通常写在第一行

<table border="3">
        <caption>这是一个表格呀</caption>
        <tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>
        <tr><td colspan="2">单元格</td><td>单元格</td></tr>
        <tr><td rowspan="2">单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td></tr>
    </table>

这里写图片描述

第五步：规范代码

我们将标题行放入<thead></thead>中

最后一行放入<tfoot></tfoot>中

其余部分放入<tbody></tbody>中

另外，可以在thead、tfoot、tbody中加入style元素设定背景颜色

最终代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="3">
        <caption>666</caption>
        <thead style="background: green">
            <tr><th>标题1</th><th>标题2</th><th>标题3</th></tr>
        </thead>


    <tbody style="background: red">
        <tr><td colspan="2">单元格</td><td>单元格</td></tr>
        <tr><td rowspan="2">单元格</td><td>单元格</td><td>单元格</td></tr>
        <tr><td>单元格</td><td>单元格</td></tr>
    </tbody>

    <tfoot style="background: yellow">
        <tr><td colspan="3" align="center">222</td>
    </tfoot>



    </table>
</body>
</html>

最后效果：这里写图片描述

啤酒我可以喝一件

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html自学笔记6——表格

前言：表格元素是html中的重要的内容，这一节将制作一个表格的每一步骤记录下来第一步：建立一个大的框架像word里面一样，在新建一个表格的时候，你要先选择是几x几的。代码： &lt;table border="3"&gt; &lt;tr&gt;&lt;td&gt;单元格&lt;/td&gt;&lt;td&gt;单元格&lt;/td&gt;&am
复制链接

扫一扫