HTML表格详解

已于 2022-03-22 00:45:51 修改
阅读量1.1k 收藏 10
点赞数 1
文章标签： html5 前端 html elementui
于 2022-03-21 00:22:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsjajwbsbsjs/article/details/123595772
版权

HTML中表格的主要用途是以网格的形式显示二维数据、在HTML的早期版本中，却常常用表格来控制页面布局，创造出类似于今天CSS栅格的效果。

大家好，我是阿闽。几天没更前端知识，主要是为了准备这次放个大招，把关于表格的元素一股脑讲了。顶得上前几天的总写作任务。

表格

如何创造一个表格

在HTML中创建一个表格，只需要一个table元素。其次，为了在表格中建立单元格、表格行和表格列等概念还需要借助于td、th、tr、col等元素。下面先介绍这些元素。

table元素

元素table
元素类型流元素
允许具有的父元素任何可以包含流元素的元素
局部属性border
内容caption colgroup thead tbody tfoot tr th td
标签用法开始标签和结束标签
默认样式tr { display: table-row; vertical-align: inherit; border-color: inherit;}

单独的一个table元素只是创建了一个表格，但储存具体表格信息的离不开它包含的tr、td等元素。

tr元素

它代表表格中的行，即"table row"。

元素tr
元素类型无
允许具有的父元素table thead tfoot tbody
局部属性无
内容th td
标签用法开始标签和结束标签
默认样式tr { display: table-row; vertical-align: inherit;}

td元素

它就是表格中的一个普通单元格，即“table data cell”

元素td
元素类型无
允许具有的父元素tr
局部属性colspan rowspan headers
内容流内容
标签用法开始标签和结束标签
默认样式tr { display: table-row; vertical-align: inherit;}

局部属性：
colspan rowxpan在制作不规则表格中讲解;
headers在将表头与单元格关联起来。

简短的代码示例

有了这三个元素，就能够组装一个最简单的表格：

<!-- 各编程语言和公认的诞生年份对应简表 -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset='utf-8'/>
    <title>一个最简单的表格</title>
    <style type="text/css">
        #lang > td{
            border: 1px dashed red;
            color: blue;
            background: #d005;
        }
        #year > td{
            border: 1px dashed blue;
            color: greenyellow;
            background: #00d5;
        }
        #table td{
            text-align: center;
        }
    </style>
    </head>
    <body>
    <div style="display: flex;
                align-content: center;
                justify-content: center;">
        <table style="background: yellow;"
                      border="10px"
                      id="table">
            <tr id="lang">
                <td>Python</td>
                <td>Java</td>
                <td>Rust</td>
                <td>C/C++</td>
                <td>JavaScript</td>
            </tr>
            <tr id="year">
                    <td>1989年</td>
                    <td>1995年</td>
                    <td>2012年</td>
                    <td>1970年/1979年</td>
                    <td>1995年</td>
                </tr>
            </table>
        </div>
    </body>
</html>

运行结果：
运行结果
在这段代码中，每个td标记了每个表格栏的内容，而tr将五个td组织成表格table中的一行。在浏览器中也确实显示成一行。

这段代码中也使用了table的border属性，此属性的效果在MDN开发者社区的解释是：

This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the frame attribute is set to void.

这个整数属性用像素值表示table的外边框大小，如果设置为0，则边框设置为无。
该属性可以用CSS实现。
假设某table的border属性值为10，等效于其添加了如下样式：

table {
	border: 10px outset gray;
}

添加表头单元格

表头单元格可以用来区分数据和对数据的说明。在HTML中用th元素表示，亦即“table head”。

th元素

元素th
元素类型无
允许具有的父元素tr
局部属性colspan、rowspan、scope、headers
内容短语内容
标签用法开始标签和结束标签
默认样式th { display: table-cellvertical-align： inherit; font-weight: bold; text-align: center; }

局部属性：
colspan和rowspan制作不规则表格中讲解;

scope headers在将表头与单元格关联起来中讲解；

代码示例

下面我们为上面的表格添加表头元素来补充对表格数据的说明：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset='utf-8'/>
    <title>一个最简单的表格</title>
    <style type="text/css">
        #lang > td{
            border: 1px dashed red;
            color: blue;
            background: #d005;
        }
        #year > td{
            border: 1px dashed blue;
            color: greenyellow;
            background: #00d5;
        }
        #table td{
            text-align: center;
        }
    </style>
</head>
<body>
<div style="display: flex;
                align-content: center;
                justify-content: center;">
    <table style="background: yellow;
                      border: 10px outset gray;"
           border="10"
           id="table">
        <tr id="lang">
            <th>编程语言</th>
            <td>Python</td>
            <td>Java</td>
            <td>Rust</td>
            <td>C/C++</td>
            <td>JavaScript</td>
        </tr>
        <tr id="year">
            <th>开发年份</th>
            <td>1989年</td>
            <td>1995年</td>
            <td>2012年</td>
            <td>1970年/1979年</td>
            <td>1995年</td>
        </tr>
    </table>
</div>
</body>
</html>

运行结果：
table with th

为表格添加结构

基本表格有了，但现在遇到一个问题。在设置表格的时候就会发现，要区别全是th元素的行中的th元素和与数据单元td混在一行中的th元素并不容易。全是th的行和仅包含少数th的行是有不同语义的，而且通常需要使用不同的CSS样式来区分。HTML为全是th的行增加了标签。

thead元素

thead元素表示整个表格的头部，通常全是th元素，亦即“table head”（与上面那个“table head”语义不同，可以理解为前面那个表示表格的小标题，而下面这个是上面那个标题的集合）

元素thead
元素类型无
允许具有的父元素table
局部属性无
内容tr
标签用法开始标签和结束标签
默认样式thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

有了头，就要有身体，表格的“身体”对应的就是tbody元素

tbody元素

元素tbody
元素类型无
允许具有的父元素table
局部属性无
内容tr
标签用法用法开始标签和结束标签
默认样式tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }

tbody表示构成表格主体的所有行，相对于表示表格头的thead。即使没有用到tbody，大部分浏览器在处理table的时候都会自动插入tbody。因此完全根据文档中的表格结构来设计CSS选择器可能不管用。如：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>被隐式插入的tbody</title>
    <style type="text/css">
        #directly > .name, #indirectly .name{
            border: 3px blue solid;
            background: #00d3;
        }
        td, th{
            outline: 1px black dashed;
        }
        #directly > .birthday, #indirectly .birthday{
            border: 3px red solid;
            background: #d003;
        }
        table{
            border: 10px black solid;
        }
        div:not(#caption){
            display: flex;
            align-content: center;
            justify-content: center;
            margin-bottom: 50px;
            border: 10px transparent solid;
            border-radius: 30px;
            background: #0003;
        }
        #caption{
            font-size: 80px;
            font-weight: bolder;
            color: orangered;
            text-align: center;
            padding: 50px 0;
        }
    </style>
</head>
<body>
<div id="caption">
    直接后代与间接后代比较
</div>
<div>
    <table id="directly">
        <tr class="name">
            <th>大牛称呼</th><td>爱因斯坦</td><td>牛顿</td><td>霍金</td>
        </tr>
        <tr class="birthday">
            <th>出生日</th><td>1879年3月14日</td><td>1643年1月4日</td><td>1942年1月8日</td>
        </tr>
    </table>
</div>
<div>
    <table id="indirectly">
        <tr class="name">
            <th>大牛称呼</th><td>爱因斯坦</td><td>牛顿</td><td>霍金</td>
        </tr>
        <tr class="birthday">
            <th>出生日</th><td>1879年3月14日</td><td>1643年1月4日</td><td>1942年1月8日</td>
        </tr>
    </table>
</div>
</body>
</html>

运行结果

有头有身体，不增加个表脚怎么行！幸好，HTML为我们贴心地准备了tfoot作为表脚。

tfoot元素

元素tfoot
元素类型无
允许具有的父元素table
局部属性无
内容tr
标签用法开始标签和结束标签
默认样式tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }

在HTML5之前，tfoot只能出现在tbody（如果省略tbody，则为第一个tr）之前（脚在身体前面，奇怪吗）。在HTML5中则可以把tfoot放在tbody元素之后或最后一个tr之后，这与浏览器显示表格的方式更为一致。用模板生成HTML代码时把tfoot放在tbody之前通常更方便一些，而手工编写HTML代码时把tfoot放在tbody之后则更自然一些。

thead、tbody、tfoot示例

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <title>tfoot示例</title>
    <style type="text/css">
        div{
            display: flex;
            align-content: center;
            justify-content: center;
        }
        thead{
            background: #d003;
            border: 2px solid red;
        }
        tbody{
            background: #0d03;
            border: 2px solid green;
        }
        tfoot {
            background: #00d3;
            border: 2px solid blue;
        }
        td, th{
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <table>
        <thead>
        <tr>
            <th>国家</th><th>人口</th><th>领土面积</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>中华人名共和国</td><td>1411780000</td><td>960万平方公里</td>
        </tr>
        <tr>
            <td>印度</td><td>1354051854</td><td>298万平方公里</td>
        </tr>
        <tr>
            <td>美国</td><td>326766748</td><td>937万平方公里</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th>综合</th><td>2798497802</td><td>2195平方公里</td>
        </tr>
        </tfoot>
    </table>
</div>
</body>
</html>

运行结果

制作不规则表格

大多数表格都是简单的网格形式，但也有表格单元跨越多行或多列的，如何用HTML制作这种表格呢？
对于任何一个单元格元素，即th或td，欲跨越若干行或若干列，我们只需设置它们的colspan属性和rowspan属性即可。

colspan为一个正整数，指定设置该属性的单元格的宽应为几列。
rowxspan为一个正整数，指定设置该属性的单元格的高应为几行。

在表格中，一个tr创建一行，每个单元格元素向行中从左至右依次填充它们的colspan列。到了下一行，若上一行有单元格元素的rowspan值大于等于2，则其将占据本行的从其被放置的首列到之后的总共colspan列。
枯燥的描述不易看懂，我们来看看实际代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>跨越多行或多列的单元格</title>
    <style>
        h1{
            text-align: center;
        }
        div{
            display: flex;
            align-content: center;
            justify-content: center;
        }
        td, th, tbody, thead, tfoot{
            border: 2px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>
    BJ40参数配置表
</h1>
<div>
    <table>
        <thead>
        <th colspan="2">条目</th><th>BJ40</th>
        </thead>
        <tbody>
        <tr>
            <th rowspan="6">尺寸参数</th><td>整车长(mm)</td><td>4350（含备胎）</td>
        </tr>
        <tr>
            <td>整车宽(mm)</td><td>4350（含备胎）</td>
        </tr>
        <tr>
            <td>整车高(mm)</td><td>1797（最大质量状态）/ 1884（整车整备质量状态）</td>
        </tr>
        <tr>
            <td>轴距(mm)</td><td>2450</td>
        </tr>
        <tr>
            <td>前轮距(mm)</td><td>1530</td>
        </tr>
        <tr>
            <td>后轮距(mm)</td><td>1530</td>
        </tr>
        <tr>
            <th rowspan="2">质量参数</th><td>整备质量(kg)</td><td>1830</td>
        </tr>
        <tr>
            <td>最大设计质量(kg)</td><td>1830</td>
        </tr>
        <tr>
            <th rowspan="7">整车性能</th><td>最高车速(km/h)</td><td>150</td>
        </tr>
        <tr>
            <td>最大爬坡度</td><td>60%</td>
        </tr>
        <tr>
            <td rowspan="2">最小离地间隙（最大总质量状态）(mm)</td><td rowspan="2">210</td>
        </tr>
        <tr></tr>
        <tr>
            <td>接近角</td><td>37°</td>
        </tr>
        <tr>
            <td>离去角</td><td>33°</td>
        </tr>
        <tr>
            <td>纵向通过角</td><td>24°</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

运行结果

把表头与单元格关联起来

td和th元素定义了headers属性，它可以供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。headers属性的值可以设置为一个或多个th单元格的id。
代码示例：

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <title>关联表头</title>
    <style type="text/css">
        h1 {
            text-align: center;
        }
        div {
            display: flex;
            align-content: center;
            justify-content: center;
        }
        table  *{
            border: 2px solid blue;
            color: orange;
            background: #0dd3;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>
    考试时间安排（关联表头版）
</h1>
<div>
    <table>
        <thead>
        <tr>
            <th colspan="2" id="time">时间</th>
            <th id="object">科目</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th rowspan="3" id="morning">上午</th>
            <td headers="morning time">7:00 --- 9:00</td>
            <td headers="morning object">语文</td>
        </tr>
        <tr>
            <td headers="morning time">9:20 --- 10:20</td>
            <td headers="morning object">地理</td>
        </tr>
        <tr>
            <td headers="morning time">10:40 --- 11:40</td>
            <td headers="morning object">生物</td>
        </tr>
        <tr>
            <th id="afternoon" rowspan="2">下午</th>
            <td headers="afternoon time">2:10 --- 4:10</td>
            <td headers="afternoon object">英语</td>
        </tr>
        <tr>
            <td headers="afternoon time">4:30 --- 6:00</td>
            <td headers="afternoon object">政治</td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>

运行结果

另外th还有一个scope属性，它也是起到语义提示的作用。具体解释看Mozilla开发者网站。

为表格添加标题

表格通常有一个标题，概括它是什么表格。前例中我们主要通过h1元素代替这个标题，但语义的紧密性不强。幸而HTML中有专门作为表格标题的标签。

caption元素

元素caption
元素类型无
允许具有的父元素table
内容流内容（但不能是table）
标签用法开始标签和结束标签
默认样式caption { display: table-caption; text-align: center; }

下面我们将丄例的caption换成h1重写：

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <title>关联表头</title>
    <style type="text/css">
        h1 {
            text-align: center;
        }
        div {
            display: flex;
            align-content: center;
            justify-content: center;
        }
        table  *{
            border: 2px solid blue;
            color: orange;
            background: #0dd3;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <table>
        <caption>
            考试时间安排（关联表头版）
        </caption>
        <thead>
        <tr>
            <th colspan="2" id="time">时间</th>
            <th id="object">科目</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th rowspan="3" id="morning">上午</th>
            <td headers="morning time">7:00 --- 9:00</td>
            <td headers="morning object">语文</td>
        </tr>
        <tr>
            <td headers="morning time">9:20 --- 10:20</td>
            <td headers="morning object">地理</td>
        </tr>
        <tr>
            <td headers="morning time">10:40 --- 11:40</td>
            <td headers="morning object">生物</td>
        </tr>
        <tr>
            <th id="afternoon" rowspan="2">下午</th>
            <td headers="afternoon time">2:10 --- 4:10</td>
            <td headers="afternoon object">英语</td>
        </tr>
        <tr>
            <td headers="afternoon time">4:30 --- 6:00</td>
            <td headers="afternoon object">政治</td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>

运行结果

处理列

前面介绍了表格的填充过程，HTML中的表格是基于行的。单元格的定义都要放在tr中，而表格则是一行一行地创建出来的。因此对列应用样式有点不方便，对于包含不规则单元格的表格更是如此。这个问题的解决方法是使用colgroup和col元素。colgroup代表一组列。

colgroup元素

元素colgroup
元素类型无
允许具有的父元素table
局部属性span
内容col
标签用法开始标签和结束标签
默认样式colgroup { display: table-column-group; }

colgroup包含列，即col元素

col元素

元素col
元素类型无
允许具有的父元素colgroup
局部属性span
内容无
标签用法虚元素形式
默认样式col { display: table-column; }

colgroup和col元素讲解

对于colgroup元素，我们可以结合tr理解。原本的文档中编写表格用的是行优先的逻辑，将真正的单元格的内容放置在tr中，一个tr管理它包含的那一行所有单元格元素，但实际上并不渲染tr元素，如果设置tr { border: 1px red solid; }，表格中每行并不会额外多一圈边框。tr仅仅起管理的作用，自身并不存在。在视觉上似乎单元格是存在于tr中的，基于tr的存在而存在，但实际上这些单元格被渲染的原因并不是浏览器渲染tr的子元素，而是浏览器渲染这些单元格自身而已。

而对于列元素col和列群元素colgroup，它也代表将要管理的列，浏览器不会渲染 真正的colgroup和col，但如果为colgroup或col设置样式，浏览器将会把这些样式应用在它所管理的列的元素上。

第一个colgroup元素从第一列开始，往后囊括共其span属性值（一个正整数，默认为能囊括之后的所有列的数字）的列数。后面的colgroup则从前一个colgroup元素囊括的后一列开始，继续向后囊括共其span属性值的列。

作为colgroup之内的col元素，其更像是colgroup
colgroup的span值表示在该colgroup内，从其囊括的第一个列开始，到共col元素的span（默认值为1）个列。即其所属的colgroup的一个子集，实现对colgroup的精准控制。

我们直接看示例：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title> col和colgroup元素示例</title>
    <style type="text/css">
        * {
            color: red;
            text-align: center;
        }
        div{
            display: flex;
            align-content: center;
            justify-content: center;
        }
        table{
            width: 80%;
        }
        table *{
            border: green 1px solid;

        }
        table  thead tr:first-child th:not(:first-child){
            font-size: 30px;
            font-weight: bold;
        }
        #date{
            background: #dd05;
        }
        #imformation > col:first-child{
            background: #0d05;
        }
        #imformation > col:nth-child(2){
            background: #0005;
        }
    </style>
</head>
<body>
<div>
    <table>
        <colgroup span="2" id="date">
        </colgroup>
        <colgroup span="4" id="imformation">
            <col span="1">
            <col span="3">
        </colgroup>
        <caption>2021年借贷业务记录表</caption>
        <thead>
        <tr>
            <th colspan="2">2021</th>
            <th rowspan="2">号码</th>
            <th rowspan="2" style="width: 30%;">摘要</th>
            <th rowspan="2" style="width: 20%;">借方</th>
            <th rowspan="2" style="width: 20%">贷方</th>
        </tr>
        <tr>
            <th>月</th>
            <th>日</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>2</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>3</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>4</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>5</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

运行结果
在这里我们明确几个细节
1.若一个元素跨越了多列或多行，其所在位置是其第一行第一列，在上述代码中，我们如果单独对第一列施加样式，一样能应用在左上角第一个单元格上。且不是值应用一半，是整个单元格全部被应用该样式。

2.不要尝试将colgroup或col的span属性设计为超出总列数。我比较抵制这些边缘试探的行为，所以也不做讨论。

HTML表格就讨论到这里，谢谢阅读。
参考：
《HTML5权威指南》

勤奋的程哥
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML—表格
Ywyyy231128的博客
11-14 4699
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
HTML第二章 “表格”详解 （附带详细代码与解释）！！！
a2499797637的博客
09-30 8386
1.表格的语法、2. 表格的可选标记、3. 表格的属性、4. 不规则的表格、5. 表格的大小
HTML表格基础
最新发布
dahongmao的博客
05-30 823
日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行整理，同样在制作网页时，为了使网页中的元素有条理地显示，也可以使用表格对网页内容进行规划。标签用于定义表头单元格，其文本默认加粗居中显示，而标签定义的为普通单元格，其文本为普通文本且水平左对齐显示。表格的宽度和高度是自适应的，依靠表格内的内容来支撑，要想更改表格的尺寸，就需要对其应用宽度属性width和高度属性height。bgcolor 设置表格的背景颜色 颜色的英文单词、十六进制颜色值#RGB、RGB颜色值rgb(r,g,b)
HTML（二）表格
核桃仁先生的博客
07-15 239
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表格</title> <style> table{/*为页面所有table标签添加样式*/ width: 720px;/*设置table宽度*/ margin:0 auto;/*设置table水平居中*/ border: black 1px solid;.
HTML表格的使用
m0_46688827的博客
12-14 1061
表格：能够使用表格相关标签和属性，实现网页表格结构的搭建 。
表格-HTML基础
2301_78835635的博客
03-20 810
在过去的web1.0时代，表格常用于页面布局。但在web2.0中，这种用表格的页面布局方式已经被抛弃，现在的网页布局都是使用CSS来实现的。但是表格并不是一无是处，表格在实际开发中是用得非常多的，因为使用表格可以更清晰地排列数据。
详解HTML表格|l-639642.pdf
11-20
HTML表格是网页设计中用于展示数据的重要元素，它允许我们以结构化的方式排列和组织信息。下面将详细解析HTML表格的各个组成部分、属性以及最佳实践。 1. **基本表格结构**： HTML表格由`<table>`标签开始，用于...
HTML表格布局实际使用详解
09-28
HTML表格布局是网页设计中的一种基础元素，尤其适用于数据展示和表单输入。虽然现代网页设计倾向于使用CSS布局，但在特定场景下，表格仍然具有其不可替代的优势。本篇文章将深入探讨HTML表格的实际使用和布局计算。 ...
Bootstrap响应式表格详解
12-09
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min....
bootstrap响应式表格实例详解
08-30
Bootstrap 响应式表格实例详解 Bootstrap 响应式表格实例详解是指使用 Bootstrap 框架来实现响应式表格的设计和开发。响应式表格是指可以根据不同设备和屏幕尺寸自动调整布局和样式的表格。Bootstrap 提供了一些预...
一文搞懂HTML中的表格、表单、列表
2301_78850344的博客
04-13 1421
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
【HTML学习笔记】表格、列表、表单标签
有准备的人
09-19 431
HTML学习笔记
html 表格的使用
wgchen
07-12 1055
html 表格的使用...
学习软件测试的第三天
W15032092800的博客
02-17 495
一、html的标签 html线上资料：HTML 元素 1.1 表格 表格标签：table table中的行标签 tr table中的列标签 td table标签的属性 width：表格的宽度，值可以是具体的值，也可以是百分比 height：表格的高度，值可以是具体的值，也可以是百分比 border：表格的边框先的粗细 bgcolor：表格的背景色 align：设置表格的对齐方式，center表示居中，left表示居左，right
HTML基础——表格
Leo的博客
04-01 215
表格：用来展示数据的，让数据显示整齐规范，展示数据 表单：用来收集用户信息的 列表：用来布局，使页面布局整齐规范 表格： 一个完整的表格有表格标签table，行标签tr，单元格标签td（都是双标签）。 tr中只能嵌套td类的单元格，td标签就像一个容器，可以容纳所有的元素。 将td变成th就可以将字体加粗。 表格标题标签caption，（居中且在表格之上），caption标签必须是在table标签之上，且只能写在table标签的内部。 表格示例1——个人信息表： <table bord.
HTML表格
Ghosind
04-11 432
介绍HTML的表格的使用。
变化多端 – 多种纯CSS的HTML表格设计
热门推荐
沧海一粟 —— 技术随手记
08-03 3万+
介绍 在HTML中，Table节点由于其层层嵌套的节点结构，一度名声很臭，且一度被呼吁用DIV+CSS取而代之。但在实际项目开发中，一碰到规整的数据显示，不知不觉又会用起它。可见其生命力之顽强。 这儿就探讨下几种不同的通过CSS实现的Table设计 。通过JavaScript渲染的效果不在此文讨论范围。表格最终渲染效果在Firefox 36.0或者Safari 8.0.7下实现。很可惜不是
HTML2 表格
mlxfora的博客
03-04 158
<table border="1" width="500px" bgcolor="#f3f3f3" cellspacing="0" align="center" frame="void" > <!-- 表格开始 --> <caption>工资统计</caption> <thead bgcolor="#f00"> <t...
HTML表格标记属性详解
"设置表格标记属性-html网页基础" 在HTML中，表格是展示数据的重要方式，通过设置不同的标记属性，我们可以自定义表格的外观和布局。以下是关于设置表格标记属性的一些关键知识点： 1. **设置表格的宽度和高度——...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值