表格标签

最新推荐文章于 2024-03-20 14:47:25 发布
最新推荐文章于 2024-03-20 14:47:25 发布
阅读量278 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 6 Java学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pengchengliu/article/details/88085582
本文深入探讨了HTML中的表格元素，包括如何使用`<table>`,`<tr>`,`<td>`等标签创建和格式化表格，以及如何实现表格的复杂布局和数据交互。同时，还讨论了现代Web开发中表格的响应式设计和 Accessibility 问题。" 139609651,11390979,浮点与双精度累加精度分析——PLC轨迹规划影响,"['算法', 'PLC', '运动控制', '轨迹规划', '浮点计算']

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

 

表格标签(很重要到一个标签)  

操作技巧：首先数数有多少行，然后数每一行有多少单元格。

 

一、格式 

<table  border="1" bordercolor="blue" cellspacing="0" width="400" height="150">      //表格的开始

       <caption>表格标题</caption>      //表格的标题，一般也不怎么写

  <tr align="center">                      //第一行。第一行所有单元格内容居中。

              <td> </td>                            //第一行的第一个单元格

              <td> </td>                            //第一行的第二个单元格

       </tr>

       <tr align="center">                       //第二行

         <td></td>

              <td></td>

       </tr>

       <tr align="center">                       //第三行

    <th></th>                             //可以使用th代替td，这时候会居中且加粗显示。

              <td></td>

       </tr>

</table>

 

<table>的属性：

border="1"                    //设置表格线的粗细。

bordercolor="blue"        //表格线的颜色

cellspacing="0"             //单元格与单元格之间距离为0。没有间隙了。

width="400"                 //表格的宽度

height="150"                //表格的高度

align="left"                  //整个表格居中显示。left 为居左 ,center 为居中，right为居右。

 

<tr>的属性：

align="center"              //内容对齐方式为：居中显示。left 为居左 ,center 为居中，right为居右。

 

<td>的属性：

align="right"                //本单元格的内容局右。

rowspan="3"                //这个单元格跨过3行。

colspan="3"                 //这个单元格跨过3列。

 

 

也可以使用<th></td>表示单元格，这时候会加粗并居中显示。

 

 

二、表格示例    

例题1：一般的表格 


//定义列表.html

<html>

        <head>

                <title>html示例</title>

        </head>

        <body>

                <table border="1" bordercolor="red" cellspacing="0" width="400" height="300">

                         <tr>                                                                                    //不用再写居中了。因为下面<th>标签自带居中和加粗。

                               <th>姓名</th>

                               <th>性别</th>  

                               <th>年龄</th>

                         </tr>

                         <tr align="center">

                               <td>东方不败</td> 

                               <td>男</td>  

                               <td>20</td>

                         </tr>

                         <tr align="center">

                               <td>岳不群</td>

                               <td>女</td>

                               <td>30</td>

                         </tr>

                         <tr align="center">

                               <td>林平之</td>

                               <td>男</td> 

                               <td>40</td>

                         </tr>

                </table>

        </body>

 

</html>

 

 

例题2：合并的单元格 

 

 

//定义列表.html

<html>

        <head>

                <title>html示例</title>

        </head>

        <body>

                <table border="1" bordercolor="red" cellspacing="0" width="400" height="300">

                         <tr>                                                                              

                               <td colspan="3">人员信息</td>            //第一行第一个单元格跨3列。

                         </tr>

                         <tr align="center">

                               <td>东方不败</td> 

                               <td>男</td>  

                               <td>20</td>

                         </tr>

                         <tr align="center">

                               <td>岳不群</td>

                               <td>女</td>

                               <td>30</td>

                         </tr>

                         <tr align="center">

                               <td>林平之</td>

                               <td>男</td> 

                               <td>40</td>

                         </tr>

                </table>

        </body>

 

</html>

 

例题3：合并的单元格 

 

 

分析：共有三行三列。

第一行：3个单元格。

第二行：2个单元格。

第三行：2个单元格。

 

//定义列表.html

<html>

        <head>

                <title>html示例</title>

        </head>

        <body>

                <table border="1" bordercolor="red" cellspacing="0" width="400" height="300">

                         <tr align="center">

                               <td>东方不败</td> 

                               <td>男</td>  

                               <td rowspan="3">20</td>              //第一行第3个单元格跨3行。

                         </tr>

                         <tr align="center">

                               <td>岳不群</td>

                               <td>女</td>

                         </tr>

                         <tr align="center">

                               <td>林平之</td>

                               <td>男</td> 

                         </tr>

                </table>

        </body>

 

</html>

 

 

 

 

 

 

 

 

 

HTML基础——表格标签
Ariel_欢
01-10 1万+
在过去表格标签用的非常多，绝大多数的网站都是表格标签来制作的，也就是说表格标签是一个时代的代表。 1.什么是表格标签？ 表格标签的作用：用来给一堆数据添加表格语义。 其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2.表格标签的格式： <table> <tr> <td>需要显示的内容</td> </tr>...
HTML入门学习笔记--表格标签(4)
qq_孤小狼的博客
01-06 840
其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表1.什么是表格标签?表格标签作用: 用来给一堆数据添加表格语义 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式2.表格标签格式:<table> <tr> <td>需要显示的内容</td> </tr> </table>其实表格标签中的
HTML表格标签
司天宏的博客
01-11 952
基本表格 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/hea
表格标签table深入了解
10-30
表格（table）是一直以来长期被大家使用的标签，直到现在还是在用，不过呢因为现在的网站重构，建议大家不要表格（table）来布局而很多朋友误以为用表格（table）就是所谓的不标准了，其实不然，表格（table）是一个...
Lesson02_01 表格标签
10-31
1. `<table></table>`：表格标签 `<table>`标签是HTML表格的根标签，用于定义一个表格。该标签有多个属性，例如： * bgcolor：设置表格的背景颜色 * border：设置表格的边框宽度 * bordercolor：设置表格的边框...
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2550
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
2022年HTML相关知识点表格标签.pptx
11-02
HTML相关知识点表格标签 HTML表格标签是HTML中一种基本的结构元素，用于组织和显示数据。下面是HTML表格标签的相关知识点： 表格的基本语法 在HTML中，表格的建立将运用、、、四个标签完成。 * 标签用于定义一个...
表格标签（table）深入了解
01-21
表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup，针对每个的介绍如下： <table>table标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格...
html中的表格标签
z_c_z_的博客
04-21 2013
表格 1、&lt;table&gt;&lt;/table&gt;:声明一个表格，所有表格的内容应该放在table标签内 属性： border：表示边框是否显示 width:表格的宽度 height：表格的高度 cellpadding:单元格边框和内容之间的补白 cellspacing:单元格和单元格之间的补白 align:表格的位置 值： left：默认值 ...
表格标签（table、行、列、表头）
09-06 4506
表格标签 一、<table> <table>代表表格标签。 <table></table> 1.width 表示表格宽度，宽度表达方式有像素和百分比两种。网页设计时如果按照像素来设计网页宽度，当网页窗口缩小时，网页大小不会随着窗口的缩小而变化，而会出现上下和左右拉伸条，以观看网站的全部内容。网站设计时如果按照百分比设计网...
表格的标签
DDqsss_的博客
07-06 142
表格标签
HTML——表格标签
最新发布
m0_57184906的博客
03-20 844
用途（场景）：在网页中以行＋列的单元格的方式整齐展示和数据，如：学生成绩表基本标签：标签名说明table表格整体，可用于包裹多个 trtr表格每行，可用于包裹 tdtd表格单元格，可用于包裹内容注意点：标签的嵌套关系：table > tr > td。
HTML 表格标签
CodeDoraemon的博客
01-23 787
1. 表格标签 学习目标 2. 表格标签的基本使用 表格的作用 表格主要用于显示、展示数据，可以使得数据显示的非常的规整，有较好的可读性，一个好的表格使得繁杂的数据显示的十分合理，网页中的例子如下所示： 表格不是用来布局页面的，而是用来展示数据的 表格的基本语法 3. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
DisplayTag表格标签详解与应用
"DisplayTag是一个功能强大的开源Java Web开发标签库，特别适用于创建数据展示表格。它提供了丰富的功能，如分页、排序、导出和自定义样式等，使得在MVC模式下处理表格数据变得更加便捷。" DisplayTag是一个在Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值