html的表格标签

最新推荐文章于 2024-05-19 11:27:40 发布
最新推荐文章于 2024-05-19 11:27:40 发布
阅读量117 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T_reak/article/details/120935212
版权

table：表格标签

        border：表格线宽属性

        caption：表格标题标签

        tr：表格行标签

        td：一般表格列标签

        th：表格列标题标签

        thead：定义表头

        tbody：定义表的核心内容

        tfoot：定义表脚(一般用来汇总数据)

        colspan：设置表格td和th的列跨度

        rowspan：设置表格td和th的行跨度

        cellpadding：定义表格内容和边框之间的空间，已经废弃，使用css替代

        cellspacing：定义了两个单元格之间的空间大小，已经废弃，使用css替代

<!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>Document</title>
</head>
<body>
    <div>
        <table width="300" border="1">
            <caption>我是表格的标题</caption>
            <tr>
                <th>第一季度</th>
                <th>第二季度</th>
                <th>第三季度</th>
                <th>第四季度</th>
            </tr>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
            <tr>
                <td>E</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
            </tr>
        </table>
    </div>
    <br>
    <br>
     <!--单元格列合并  -->
    <div>
        <table border="1" width="300">
            <caption>单元格列合并</caption>
            <tr>
                <td colspan="3">A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td colspan="2">D</td>
                <td>E</td>
            </tr>
            <tr>
                <td>F</td>
                <td>G</td>
                <td>H</td>
                <td>I</td>
            </tr>
        </table>
    </div>
    <br>
    <br>
    <!-- 单元格行合并 -->
    <div>
        <table border="1" width="300">
            <caption>单元格行合并</caption>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td rowspan="2">F</td>
                <td>G</td>
                <td rowspan="3">H</td>
            </tr>
            <tr>
                <td>I</td>
                <td>J</td>
            </tr>
            <tr>
                <td>K</td>
                <td>L</td>
                <td>M</td>
            </tr>
        </table>
    </div>
    <br>
    <br>
    <!-- 单元格的行列合并 -->
    <div>
        <table border="1" width="300">
            <caption>单元格的行列合并</caption>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td rowspan="2">F</td>
                <td rowspan="3" colspan="2">G</td>
            </tr>
            <tr>
                <td>H</td>
            </tr>
            <tr>
                <td>I</td>
                <td>J</td>
            </tr>
        </table>
    </div>
    <br>
    <br>
    <!-- 表格的其他特征 -->
    <div>
        <table border="1">
            <caption>thead tbody tfoot标签</caption>
            <thead>
                <tr>
                    <th></th>
                    <th colspan="2">第一季度</th>
                    <th colspan="2">第二季度</th>
                    <th colspan="2">第三季度</th>
                    <th colspan="2">第四季度</th>
                </tr>
                <tr>
                    <th></th>
                    <th>国内</th>
                    <th>国外</th>
                    <th>国内</th>
                    <th>国外</th>
                    <th>国内</th>
                    <th>国外</th>
                    <th>国内</th>
                    <th>国外</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>苹果</td>
                    <td>111</td>
                    <td>120</td>
                    <td>155</td>
                    <td>132</td>
                    <td>148</td>
                    <td>109</td>
                    <td>123</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>香蕉</td>
                    <td>111</td>
                    <td>120</td>
                    <td>155</td>
                    <td>132</td>
                    <td>148</td>
                    <td>109</td>
                    <td>123</td>
                    <td>90</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>总计</td>
                    <td>222</td>
                    <td>240</td>
                    <td>310</td>
                    <td>264</td>
                    <td>296</td>
                    <td>218</td>
                    <td>246</td>
                    <td>180</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

名叫Java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML表格标签超级详细
zheng_qingyuan的博客
06-19 3884
表格是网页中十分重要的组成元素。表格包含表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列等内容。 标签。简单的 HTML 表格由 table 元素以及一个或多个 、 或 元素组成表格结构其中： 元素定义表格行， 元素定义表头， 元素定义表格单元。标记常用属性属性名说明align设置表格相对周围元素的对齐方式bgcolor设置表格的背景颜色background设置表格的背景图片border设置表格的边框wi......
04-HTML表格标签.html
01-08
04-HTML表格标签.html
html表格
chq11106004389的博客
01-06 1063
CSS \  caption是标题,caption-side:top默认值。把表格标题定位在表格之上。 bottom把表格标题定位在表格之下。 inherit规定应该从父元素继承 caption-side 属性的值。 单元格和盒模型相似,但单元格没有外边距,不能单独控制各个表格单元的边框间距。而要统一通过border-spacing来设置. border-spacing:1
html中table标签用法
热门推荐
chengxuzx的博客
05-29 1万+
1.<table> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>biaoge</title> </head> <body> <table border="1" cellpadding="0" cellspacing="8"> <tr> ...
CSS 表格中的单元格边框重叠属性 border-collapse
qhr2617869的专栏
09-17 3444
语法：border-collapse : separate | collapse 取值： separate :　 默认值。边框独立(标准HTML) collapse :　 相邻边被合并 说明： 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 bo
html表格标签
weixin_44992737的博客
06-06 5180
html表格标签详解
HTML表格标签
weixin_52629158的博客
10-23 1907
HTML表格标签
HTML表格标签详解
实泽有之，无泽虚之
03-26 8648
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
HTML 表格标签
qq_48516121的博客
09-28 1105
HTML 表格标签
HTML表格标签的案例
weixin_45904557的博客
02-26 2365
前言 上一篇是表格的基本结构标签和一些属性以及怎么样合并单元格，这篇博客就来具体练习一下table的使用 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> td{ text-align: center; font-size: 24px
HTML的表格标签
qianniao_yingmo的博客
03-30 3204
表格标签需要知道的的基础知识
表格标签.html
09-17
表格标签
HTML基础重点_一般标签、常用标签和表格
09-28
下面小编就为大家带来一篇HTML基础重点_一般标签、常用标签和表格。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML中table表格标签的基础学习教程
09-28
用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
详解HTML表格|l-639642.pdf
11-20
作用：数据的展示，表格应用场景. ...表格结构标签：加载一部分 显示一部分 更加便利. 划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局 　<caption>...</caption>
前端基础入门三大核心之HTML篇：无序列表的深度探索
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 779
在HTML中，无序列表是一种用于展示一系列条目，且这些条目的顺序无关紧要的列表结构。它通过（unordered list）标签来定义，而每个具体的条目则由（list item）标签包裹。为了美化列表，可以使用CSS来定制样式。例如，改变列表项的符号：/* 可以是disc, circle, square等 */ } < ul > < li > 项目一 < li > 项目二 < li > 项目三 ul。
前端基础入门三大核心之HTML篇：解密标签、标题与段落的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 1029
标题标签从到，分别代表六个不同的层级，最为重要，则较为次要。合理使用标题不仅有助于内容结构化，也有助于SEO。
如何理解HTML语义化
2402_84885073的博客
05-17 301
HTML提供了许多具有明确语义的标签，如、、、、等，这些标签能够清晰地表达页面内容的结构。尽量避免使用无具体语义的标签（如、等）进行无意义的包裹，而是使用具有明确语义的标签来描述页面元素。对于需要强调的文本，可以使用（斜体）或（加粗）标签来替代和标签，以增加文本的语义性。避免使用纯样式标签（如、、等），而是使用CSS来设置元素的样式。
详解HTML
Romised的博客
05-17 793
HTML 结构、认识HTML标签、标签层次结构、快速生成代码框架、HTML常见标签、注释标签、标题标签：h1-h6、段落标签：p、换行标签：br、格式化标签、图片标签：img、超链接标签、表格标签、合并单元格、列表标签、表单标签、form 标签、input 标签、label标签、select、textarea标签、无语义标签：div&span、综合案例：展示简历信息
html表格标签怎么使用
05-19
HTML表格标签用于在网页中创建表格。以下是一些常用的HTML表格标签： 1. `<table>` 标签：用于定义表格。 2. `<tr>` 标签：用于定义表格中的行。 3. `<th>` 标签：用于定义表格中的表头单元格。 4. `<td>` 标签：用于定义表格中的数据单元格。 下面是一个简单的HTML表格示例： ``` <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>女</td> <td>18</td> </tr> </table> ``` 以上代码会创建一个包含两行三列的表格，第一行为表头，第二行和第三行分别为数据行，每个数据行都包含三个数据单元格，分别显示姓名、性别和年龄。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值