HTML基础知识（4）---表格

已于 2023-03-20 11:36:50 修改
阅读量3.2k 收藏 10
点赞数 2
分类专栏： HTML 文章标签： html5 html 前端 Powered by 金山文档
于 2023-01-30 17:48:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Litheng/article/details/128805905
版权

一、表格的基础结构

表格基础标签都遵循双标签的基本结构

<table>
<tr>
<td></td>
</tr>
</table>

table标签就是表格的意思，tr意为表格行，td意为表格数据单元。

不要在table标签和tr标签里面包裹其他标签，如果想增强表现力，可以将其他标签放在td标签里面。

每个tr标签里面td标签的个数是相等的

<th></th>

th标签，意为表头单元格，语法和td类似，需要被包裹在tr标签里面，th标签里面的文本加粗并居中显示。

二、绘制表格线

  1. 给table标签加上一个border属性，定义线条的粗细

  1. 给table标签加上一个width属性，定义表格的总宽度

  1. 给table标签加上一个height属性，定义表格的总高度

  1. 给table标签加上一个cellspacing属性，定义是单元格之间的距离

  1. 给table标签加上一个cellpadding属性，定义单元格边框和文本之间的距离

  1. 给table标签加上一个align属性，有left左对齐，center居中对齐，right右对齐

  1. 给table标签加上一个bgcolor属性，用来修饰表格的背景颜色

  1. 给table标签加上一个bordercolor属性，用来修饰表格的边框颜色

三、单元格被挤压

tr标签里面高度值设成一个数字，如果某一单元格的内容增加或者减少，就会出现单元格大小不一致的情况，这个被挤压的情况，就是由于表格的整体高度固定为150，第一行高度占了多少，剩余几行平均分配剩余高度。

W3C官方公布的tr属性里没有宽度属性的

四、就近原则

如果在表格的不同标签上定义了相同属性，浏览器会采取就近的原则来渲染，后代标签属性渲染是高于父级标签的

五、tr标签属性

添加到tr标签的每一个属性，都能作用到这一行的每个td单元格上。

align属性，align属性是用来设置tr内部所有单元格内容的水平对齐方式，属性值有：left（左对齐），center（居中对齐），right（右对齐）

valign属性，valign属性是用来设置tr内部所有单元格内容的垂直对齐方式，属性值有：top（顶部对齐），middle（居中对齐），bottom（底部对齐）

六、td标签属性

width属性，设置单元格宽度，调整任何单元格的宽度，都会影响该单元格所在列的所有单元格的宽度

height属性，设置单元格高度，调整任何单元格的高度，都会影响该单元格所在列的所有单元格的高度

bgcolor属性，设置单元格背景色，设置在tr标签上时会设置一整行单元格的背景颜色，添加在td标签上时只会设置该单元格的背景颜色

align属性，单元格内容的水平对齐方式，left（左对齐），center（居中对齐），right（右对齐）

valign属性，单元格内容的垂直对齐方式，top（顶部对齐），middle（居中对齐），bottom（底部对齐）

七、合并单元格

1.横向合并（水平合并）

在需要合并的第一个单元格里的td标签里面添加colspan属性，它的值就是合并列的总数

2.纵向合并（垂直合并）

在需要合并的第一个单元格里的td标签里面添加rowspan属性，它的值就是合并行的总数

单元格的合并必定会产生跨行或跨列

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表</title>
 </head>
 <body>
    <table width="540" height="385" border="1" cellspacing="0" cellpadding="0" align="center">
        <!-- 第一行 -->
        <tr bgcolor="deepskyblue">
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
        </tr>
        <!-- 第二行 -->
        <tr bgcolor="skyblue">
            <td align="center">早自习</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td rowspan="4" bgcolor="skyblue" align="center">上午</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第四行 -->
        <tr bgcolor="skyblue">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第六行 -->
        <tr bgcolor="skyblue">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td rowspan="4" bgcolor="skyblue" align="center">下午</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第八行 -->
        <tr bgcolor="skyblue">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第十行 -->
        <tr bgcolor="skyblue">
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td bgcolor="skyblue" align="center">晚自习</td>
            <td colspan="5"></td>
        </tr>
    </table>
 </body>
 </html>

效果如下：

八、表格标题标签

caption标签，双标签，是table标签的子标签，一般放置在tr标签的上面。

<caption>文本内容</caption>

九、行分组标签

thead表格头标签

tbody表格体标签

tfoot表格尾标签

表格如果没有使用任何分组标签，浏览器在渲染时，会把table中所有未分组的tr放在一个tbody标签里面。

一个表格只允许使用一个thead标签和一个tfoot标签，但是允许使用多个tbody标签。

十、列分组标签

colgroup列分组标签

span属性：取值为一个数值，意为多少列分成一组

如果需要划分多组，需要使用多个colgroup标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格其他标签</title>
</head>
<body>
    <table width="600" border="1" align="center" bgcolor="#CDE7ED" cellspacing="0" cellpadding="0" bordercolor="#ffffff">
        <caption>薪资</caption>

        <colgroup span="1" bgcolor="#91C5D4"></colgroup>
        <thead>
            <tr align="center" bgcolor="#66A9BD">
                <th rowspan="2">序号</th>
                <th colspan="6">职级薪资</th>
            </tr>
            <tr align="center" bgcolor="#91C5D4">
                <th>P序列</th>
                <th>P级名称</th>
                <th>M序列</th>
                <th>M级名称</th>
                <th>薪资</th>
                <th>股票</th>
            </tr>
        </thead>

        <tbody>
            <tr align="center">
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr align="center">
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr align="center">
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr align="center">
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr align="center">
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>    
        </tbody>

        <tfoot>
            <tr align="center" bgcolor="#D7E1C5">
                <th bgcolor="#B0CC7F">内容</th>
                <th colspan="6">内容</th>
            </tr>
        </tfoot>
       

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

效果如下：

Litheng
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
怎么用HTML表格中加上线条,如何在html的表格中加入边框线
weixin_39879881的博客
05-31 6873
html的表格中加入边框线方法：一、如何在html的表格中加入边框线只对table标签设置border(边框)样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。案例详细如下：1、对应css代码.table-atable{border:1pxsolid#F00}/*css注释：只对table标签设置红色边框样式*/2、对应html代码片段站名网址说明DIVCSS域名CSS...
HTML小技巧：将table边框改为细线
06-03
HTML小技巧：将table边框改为细线 HTML制作新手在用TABLE表格时，会碰到如何改变边线粗线
设置html表格为细线
qq_26993175的博客
02-10 1712
设置表格为细线： <style> .table-style{ border-collapse:collapse;//设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示 border-spacing:0;//属性设置相邻单元格的边框间的距离 border-left:1px solid #ccc; border-top:1px solid #ccc; } .table-style th,.define-table td
表格-HTML基础
最新发布
2301_78835635的博客
03-20 779
在过去的web1.0时代，表格常用于页面布局。但在web2.0中，这种用表格的页面布局方式已经被抛弃，现在的网页布局都是使用CSS来实现的。但是表格并不是一无是处，表格在实际开发中是用得非常多的，因为使用表格可以更清晰地排列数据。
html-to-csv：HTML到CSV是一个项目，包括将数据从使用HTML制成的表中迁移到CSV文件，该文件可以在Excel，Google表格和其他文件中打开
02-15
HTML段CSV HTML para CSV是一个项目，其中包括将数据从使用HTML制成的表中迁移到CSV文件，该文件可以在Excel，Google表格和其他文件中打开。 在上实时观看 :books: 我从该项目中学到了什么？ 我了解了如何将HTML表迁移到CSV文件 我了解了使用Blob和创建一个临时URL的基础知识，该URL可让您下载文件 :rocket: 特征 HTML CSS JavaScript :dna: 克隆 使用git clone https://github.com/joaogabriel-sg/html-to-csv.git克隆此存储库 将自己移至适当的存储库cd html-to-csv :page_with_curl: 执照 此项目已获得MIT许可证的许可-有关详细信息，请参见页面。
AngularJS基础知识笔记之表格
12-29
表格数据本质上通常是重复的。ng-repeat指令，可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat=subject> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> 表格可以使用CSS样式设置样式，如下： <style> table, th , td {
实训四-HTML基础知识之表格化网页.pdf
10-07
实训四-HTML基础知识之表格化网页.pdf
table添加实线的边框线
weixin_42588672的博客
01-06 2042
可以使用 HTML 中的 style 属性来添加实线边框线。例如： <table style="border: 1px solid black"> <!-- 表格内容 --> </table> 这样就可以在表格中添加一条粗细为 1 像素、颜色为黑色的实线边框线了。 你也可以使用其他的样式属性来调整边框的样式，例如 border-color 属性来调整边框的...
解决html中表格线条粗细不一的问题
https://shixuebin.gitee.io/hexo-blog/
10-25 2387
通过代码可知：我们将table的border-collapse属性改成了separate，这是关键，然后td只显示下边框和右边框，最外层table边框只显示上边框和左边框，这样就解决了边框线条粗细不一的问题。我们再html中使用原生的table时，为了美观往往会通过改变td的border来改变表格边框的样式，但是通常会处出现边框线条粗细不一的问题，下面代码解决了该问题。
html表格线条粗细,[转]HTML中表格table边框border（1px还嫌粗）的解决方案：
weixin_42696271的博客
06-03 7185
第一种方法：1、将table的属性设置为：BORDER=0 、cellspacing=1 ；2、设置table的背景色为即你要设置的table的边框颜色；3、设置所有td背景色为#ffffff白色；这样，就大功告成了。第二种方法：1、设置BORDER=0 ；2、再通过CSS，给Table加上1px的border-top,border-left；3、然后再设置所有的td的border-right,b...
table(表格)边框改为细线
qq_69761234的博客
05-23 1807
上一个文章中介绍了table(表格)的一些基本属性，但是制作出来的是边框挺不美观的如下： 在补充两个属性： colspan 水平方向单元格的合并 rowspan 上线方向单元格的合并 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body...
HTML5基础知识-HTML5表格与列表.pptx
05-06
行 列 1 <table border=”1”> </table> 表格 <tr> </tr> 数据行 <td>张三</td> <td> 男 </td> <td> 19 </td> 数据项 ？ 表格边框 1 有表 头 的 表 格 1 有标题的 表 格 属性 值 描述 align left/center/right 不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 bgcolor rgb(x,x,x)/#xxxxxx/ colorname 不赞成使用。规定表格的背景颜色。 border pixels 规定表格边框的宽度。 cellpadding pixels % 规定单元边沿与其内容之间的空白。 cellspacing pixels % 规定单元格之间的空白。 width % pixels 规定表格的宽度。 2 2 bgcolor：规定表格的背景颜色 该属性可以用在<table>、 <tr>、 <td>、<th>元素中 表格背景 background：设置背景图片 该属性可以用在<table>、<td>、<th>元素中 如果在<table>中和<tr>中同时设置了背景色，<
实训四-HTML基础知识之表格化网页.txt
10-07
实训四-HTML基础知识之表格化网页.txt
html5表格内边框加粗,如何制作加粗的边框表格？
weixin_29474431的博客
07-01 2453
平时我们做表格的时候，可以制作加粗的边框表格，那么，如何制作呢?下面是小编为大家精心整理的关于如何制作加粗的边框表格？希望能够帮助到你们。方法/步骤1第一步：打开Excle表格，选择需要添加加粗边框表格的区域，这个可以根据自己的需求来选择，如图所示：2第二步：点击添加边框的邮编倒三角符号，在下拉菜单中选择最后一项，其他边框(M)...如图所示：3第三步：在弹出的单元格格式对话框中，选择线条样式，可...
HTML小技巧将table边框改为细线
weixin_30256901的博客
03-25 559
HTML制作新手在用TABLE表格时，会碰到如何改变边线粗线，因为默认的TABLE边线设置即使是1px 是很粗的。因此会使用其他一些方法来制作出细线边框，这里介绍一种利用CSS来实现细线的方法，很有效，而且兼容所有浏览器。 细线表格如果单纯设置边框，很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框；并对 table 元素设...
html table边框细线,HTML小技巧将table边框改为细线
weixin_30350469的博客
06-28 2426
HTML制作新手在用TABLE表格时，会碰到如何改变边线粗线，因为默认的TABLE边线设置即使是1px 是很粗的。因此会使用其他一些方法来制作出细线边框，这里介绍一种利用CSS来实现细线的方法，很有效，而且兼容所有浏览器。细线表格如果单纯设置边框，很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框；并对 table 元素设置...
利用html实现细线表格
qq_58047273的博客
10-18 475
利用html实现细线表格效果
实现细线表格的两种方式
qq_58782226的博客
07-27 535
实现细线表格的两种方式
蓝易云：html实现原生table并设置表格边框的两种方式
蓝易云
08-21 1708
这两种方式都可以用来实现带有边框的原生HTML表格，你可以根据需要选择适合的方式。使用CSS样式可以更灵活地控制表格的边框样式，包括线条样式、颜色、粗细等。希望以上解答对你有帮助。如果你有任何其他问题，请随时提问。使用HTML的表格边框属性可以直接设置表格的边框样式。设置每个单元格的边框为1像素的实线黑色。方式二：使用CSS样式设置表格边框。在上述代码中，通过CSS样式设置。方式一：使用HTML表格边框属性。将表格边框合并为单一边框，而。属性将设置表格的边框为实线。
html入门基础知识
10-08
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签被用来定义和呈现网页的内容和结构。HTML中的基本概念包括标签、元素、属性和文本内容。 标签是用尖括号括起来的，用来标识HTML文档中的元素。每个HTML元素都由一个起始标签和一个结束标签组成，起始标签用来标识元素的开始，结束标签用来标识元素的结束。例如，`<p>`是一个段落的起始标签，`</p>`是一个段落的结束标签。 元素是由起始标签、结束标签和两者之间的内容组成的。例如，`<p>Hello World!</p>`是一个包含了"Hello World!"文本内容的段落元素。 属性是用于为HTML元素提供额外信息的。属性总是包含在起始标签中，并以键值对的形式出现。例如，`<a href="https://www.example.com">Link</a>`中的`href`属性指定了链接的目标地址。 HTML中的文本内容是在元素中显示的可视文本。例如，在`<h1>`元素中的文本内容会显示为大标题。 除了这些基础知识，HTML还有许多其他的标签和属性可以用来创建复杂的网页，如标题标签、列表标签、表格标签、图像标签等等。此外，还可以使用CSS（层叠样式表）来为HTML元素添加样式和布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值