p33 表格标签基本使用

最新推荐文章于 2025-06-08 20:30:00 发布
原创 最新推荐文章于 2025-06-08 20:30:00 发布 · 633 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #java #javascript

1.表格标签

表格是实际开发中非常常用的标签：

1.表格的主要作用

2.表格的基本语法

1.1表格的主要作用

8分钟学完

表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

1.2表格的基本语法

<table>

        <tr>

            <td>单元格内的文字</td>

            ...

        </tr>

        ...

    </table>

1.<table></table>是用于定义表格的标签

2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4.字母td指表格数据(table data),即数据单元格的内容。

1.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

<th>标签表示HTML表格的表头部分(table head的缩写)

<table>

        <tr>

            <th>姓名</th>

            ...

        </tr>

        ...

    </table>

总结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

1.4表格属性

表格标签这部分属性实际开发不常用，后面通过CSS来设置。

目的有2个：

1.记住这些英语单词，后面CSS会使用。

2.直观感受表格的外观形态。

属性名属性值描述
alignleft、center、right 规定表格相对周围元素的对齐方式
border1或者""规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding像素值规定单元边沿与其内容岁之间的空白，默认是1px
cellspacing像素值规定单元格之间的空白，默认是2px
width像素值或百分比规定表格的宽度
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>

        </tr>

        <tr>
            <td>刘德华</td>
            <td> 男 </td>
            <td> 56 </td>
        </tr>
        <tr>
            <td>张学友</td>
            <td> 男 </td>
            <td> 58 </td>
        </tr>
        <tr>
            <td>郭富城</td>
            <td> 男 </td>
            <td> 51 </td>
        </tr>
        <tr>
            <td>黎明</td>
            <td> 男 </td>
            <td> 57 </td>
        </tr>
    </table>
</body>

</html>

实现效果：

时间案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
</head>

<body>
    <table align="center" width="500" height="249" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="向下.png" height="10" width="10"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="向下.png" height="10" width="10"></td>
            <td>124</td>
            <td>675432</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="向上.png" height="10" width="10"></td>
            <td>212</td>
            <td>7654</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="向上.png" height="10" width="10"></td>
            <td>23</td>
            <td>75645</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="向下.png" height="10" width="10"></td>
            <td>121</td>
            <td>7676</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="向上.png" height="10" width="10"></td>
            <td>576576</td>
            <td>1231421</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="向上.png" height="10" width="10"></td>
            <td>234</td>
            <td>7686</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
        </tr>
    </table>
</body>

</html>

实现效果

1.5表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格语义，可以将表格分割成表格头部和表格主体两大部分，在表格标签中，分别用：<thead>标签表格的头部区域，<tbody>标签表格的主体区域，这样可以更好的分清表格结构。

1.<thead></thead>：用于定义表格的头部,<thead>内部必须拥有<tr>标签，一般是位于第一行。

2.<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。

3.以上标签都是放在<table></table>标签中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
</head>

<body>
    <table align="center" width="500" height="249" border="1" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
<tbody>

<tr>
    <td>1</td>
    <td>鬼吹灯</td>
    <td><img src="向下.png" height="10" width="10"></td>
    <td>456</td>
    <td>123</td>
    <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
<tr>
    <td>2</td>
    <td>盗墓笔记</td>
    <td><img src="向下.png" height="10" width="10"></td>
    <td>124</td>
    <td>675432</td>
    <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
<tr>
    <td>3</td>
    <td>西游记</td>
    <td><img src="向上.png" height="10" width="10"></td>
    <td>212</td>
    <td>7654</td>
    <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
<tr>
    <td>4</td>
    <td>东游记</td>
    <td><img src="向上.png" height="10" width="10"></td>
    <td>23</td>
    <td>75645</td>
    <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
<tr>
    <td>5</td>
    <td>甄嬛传</td>
    <td><img src="向下.png" height="10" width="10"></td>
    <td>121</td>
    <td>7676</td>
    <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
<tr>
    <td>6</td>
    <td>水浒传</td>
    <td><img src="向上.png" height="10" width="10"></td>
    <td>576576</td>
    <td>1231421</td>
    <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
<tr>
    <td>7</td>
    <td>三国演义</td>
    <td><img src="向上.png" height="10" width="10"></td>
    <td>234</td>
    <td>7686</td>
    <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
</tbody>
       
    </table>
</body>

</html>

1.6合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，这里同学们会最简单的合并单元格即可。

合并单元格方式：

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan="合并单元格的个数"

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

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

</html>

实现效果

跨列合并，从左到右，第一行第二个单元格是目标单元格，在目标单元格中写代码，colspan="2"

删除目标单元格后面的单元格。合并几个删几个。

删除第一行第三个单元格

跨行合并，从上到下。第二行第一个单元格是目标单元格，写代码，rowspan="2"

删除第三行第一个单元格

1.7表格总结

1.表格的相关标签

我们学习了table标签 

tr行标签

td单元格标签

th表头单元格标签

thead表格头部区域标签

tbody表格主体区域标签

2.表格的相关属性

属性名属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式
border1或者""规定单元格是否有边框，默认为“”，表示没有边框
cellpadding像素值规定单元边与其内容之间的空白，默认1px
cellspacing像素值规定单元格之间的距离，默认2px
width像素值或百分比规定表格的宽度

3.合并单元格

HTML表格的设计与数据展示
吃不胖.
08-07 629
在设计HTML表格时，我们应该选择适当的表格字体和颜色，以实现更好的可读性和美观度。综上所述，设计HTML表格需要我们考虑到多个方面，包括表格标记、表格结构和布局、表格字体和颜色、表格数据等。HTML表格是一种非常重要的数据展示方式，可以让我们更加清晰地展示数据，并且能够帮助我们更加直观的了解数据的关系和组成。在设计HTML表格时，我们应该考虑表格的结构和布局，以实现更好的可读性和美观度。我们应该根据数据的类型选择合适的表格格式，例如数字型数据可以使用右对齐方式，文字型数据可以使用左对齐方式。
HTML基础知识6-表格标签
qq_45353963的博客
12-15 361
表格标签 表格的主要作用 表格主要用于显示以及展示数据 表格的基本语法 <table> <tr> <th>内容</th> <th>内容</th> .............. </tr> </table> <table></table>是用于定义表格的标签 <tr></
Html 实现角标效果
weixin_43484014的博客
12-17 2633
Html 实现角标效果 效果如上： 代码如下： <footer> <div class="bottomBox"> <div class="indexMsg con"> <div class="subscript"> ...
【Web】HTML标签:表格。（1）作用：用于显示、展示数据（2）语法＜table＞＜/table＞是用于定义表格的标签＜tr＞＜/tr＞标签用于定义表格中的行，必须嵌套在＜table＞
qq_52978240的博客
04-01 2029
表格 （1）作用：用于显示、展示数据 （2）语法 <table></table>是用于定义表格的标签 <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中 <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中 字母td指表格数据（table data），即数据单元格的内容 (3)表头单元格标签 a.一般位于表格的第
设计好的报表是如何在 web 上显示的
RQlyc的博客
11-25 296
润乾报表主要用来开发在 java web 端呈现的报表工具，设计器为桌面版，那么开发后的报表如何发布到 web 端是用户较为关心的问题。 润乾报表 web 端发布，采用 Taglib 方式，只需要在 jsp 内引入标签库，调用具体的标签（如，report：html）发布即可，可嵌入任何 jsp 页面。 具体怎么做？ 方法一： 一般情况下，使用润乾自带 demo 下提供的 Jsp 可直接实现...
HTML基本标签使用【超链接标签、表格标签、表单标签、input标签】
m0_73940426的博客
06-19 1412
HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。它通过一系列标签来描述网页内容的结构和外观，从而使浏览器能够解释并展示网页给用户。HTML文档由不同的元素组成，每个元素由标签表示，这些标签用来标记文本、图像、链接、表格、表单等网页内容，并定义它们的结构和意义。❤️❤️❤️本人菜鸟修行期，如有错误，欢迎各位大佬评论批评指正！😄😄😄👍 👍 👍。
HTML基础重点_一般标签、常用标签和表格
12-13
`<p>`标签定义段落，`<div>`和`<span>`作为布局控制，`<div>`常用于划分页面区域，`<span>`则用于行内元素的样式控制。`<ol>`和`<ul>`创建有序和无序列表，`<li>`定义列表项。 超链接标签`<a>`是HTML中至关重要的...
入门：HTML的基本标签和属性简单介绍
09-28
`<BR>`用于单行换行，`<P>`用于创建段落，`<B>`和`<I>`分别表示加粗和斜体文本。`<HR>`创建水平线，而`<TABLE>`、`<TR>`和`<TD>`则用于构建表格。 HTML中的属性是进一步定制元素行为的关键。属性通常写在开始标签内...
HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
weixin_44819178的博客
08-04 988
一、排版标签 1、标题标签 在新闻和文章的页面中都离不开标题，用来突出显示文章主题。 h系列标题 <body> <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级
web使用displaytag显示表格(提供排序,链接,下载等等)
phantomes的专栏
10-14 252
  DisplayTag是一个开源的自定义标签库（Custom Tag lib），他提供了直接而有效的格式化web视图层数据的有效手段。你可以在现在流行的web应用的MVC模式中集成DisplayTag到View层，其提供的强大表格格式化功能一定会令你爱不释手。或许上面说的有些夸张了，但是DisplayTag在表格的格式化方面表现确实出色，当然，他也只能显示表格，视图层的大部分工作不就是使用...
HTML_TABLE_数据填充处理.
04-21
里面有详细的注释
HTML 表格
jiaomubai的博客
09-22 1353
html 表格
html表格的作用是用来显示数据
Black_Straight的博客
06-01 852
html表格的作用是用来显示数据
解析HTMLtable数据
weixin_46056679的博客
03-30 311
【代码】解析HTMLtable数据。
Java web 实现页面显示数据库表格
weixin_45230720的博客
05-12 3787
运行错误显示 ERROR: IllegalAccessException for stop method in class org.apache.tomcat.maven.plugin.tomcat7.run.ExtendedTomcat 目录 mapper package com.itheima.mapper; import com.itheima.pojo.Brand; import org.apache.ibatis.annotations.Select; import j..
Web前端，HTML表格相关标签和属性，在网页中表格结构的显示
星辰迷上大海的博客
04-20 3471
Web前端，HTML表格相关标签和属性，在网页中表格结构的显示
web界面之表格显示的几点功能（包括js修改样式，ajax数据交互等）
飞翔射手座
10-01 1995
实现功能：数据的套打功能 前期工作：已经将要套打的样式按照固定位置，在HTML页面完全固定好，将数据传入就可以准确套打。 具体需求：将数据以excel文件上传，上传成功先进行数据的展示，然后再存入数据库中，接着进行数据的管理，包括：增删改查以及打印。 所用技术：SpringBoot+MyBatis+Mysql 开发工具：eclipse 实现过程： 1、按照需求进行前端页面的设计，总共有上传、编辑、...
总结html标签——table表格
最新发布
为你而战的博客
06-08 3857
本文全面介绍了HTML中table标签的使用方法，从基础结构到高级应用。主要内容包括：表格的基本组成元素（thead、tbody、tr、td等）、单元格合并技巧（colspan和rowspan），以及通过CSS设置边框、悬停效果和斑马条纹等样式。文章还讲解了响应式表格的实现方法和JavaScript动态操作表格的技巧，并对比了DataTables、Handsontable等常用表格库的优缺点。通过合理运用这些技术，开发者可以创建功能丰富、美观实用的数据表格。
Html——表格table总结
狂野的鬼
03-30 767
目录 表格标签组合规范 表格的单元格合并 表格相关属性 表格标签组合规范 <table border="1"> <!-- thead 表格的页眉 --> <thead> <!-- tr 定义表格的行 --> <tr> <!-- th 表头 --> ...
HTML基础教程：关键标签与表格解析
"这篇资源主要介绍了HTML的基础知识，包括HTML的基本结构、常用的一般标签、内容容器标签以及表格的使用。作者提供了详细的代码示例，旨在帮助初学者掌握HTML的基本语法和常见元素的使用方法。" HTML是HyperText ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

靳向阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值