2021-07-14 表格单元格的属性与结构化

最新推荐文章于 2022-06-09 14:56:58 发布
最新推荐文章于 2022-06-09 14:56:58 发布
阅读量181 收藏
点赞数 1
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46522502/article/details/118739096
版权

1.直接上代码

<body>
    <!-- 
        默认单元格的内容会撑开表格宽高
        border="1"  表格的边框
        width="200" 表格的宽
        height="200" 表格的高
        cellpadding="5"  单元格和内容之间的距离
        cellspacing="0"  单元格和单元格之间的距离
    -->
    <!-- table表格标签  -->
    <table border="1" cellpadding="5" cellspacing="0">
        <!-- tr 每一行 -->
        <!-- th 表格的标题栏位（单元格, 内容会加粗和居中） -->
        <!-- td 表格的数据栏位（单元格） -->
        <tr>
            <!-- th 表格的标题栏位（单元格, 内容会加粗和居中） -->
            <th>节次\星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr>
            <!-- td 表格的数据栏位（单元格） -->
            <th>第一节</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- td 表格的数据栏位（单元格） -->
            <th>第二节</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- td 表格的数据栏位（单元格） -->
            <th>第三节</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- td 表格的数据栏位（单元格） -->
            <th>第四节</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

效果如下图👇👇👇
在这里插入图片描述

2.单元格的属性

headers属性，可以显示出单元格之间的关系, 让标题栏关联数据栏。

<table border="1" width="400" height="160">
        <tr>
            <!-- th标题 -->
            <th id="name">姓名</th>
            <th id="age">年龄</th>
            <th id="location">住址</th>
            <th id="tel">电话</th>
        </tr>

        **<!-- headers="" 对于非可视化浏览器, 可以显示出单元格之间的关系, 让标题栏关联数据栏 -->**
        <tr>
            <td headers="name">小羊</td>
            <td headers="age">6</td>
            <td headers="location">草原</td>
            <td headers="tel">13589099809</td>
        </tr>

        <tr>
            <td headers="name">小马</td>
            <td headers="age">6</td>
            <td headers="location">草原</td>
            <td headers="tel">13589099809</td>
        </tr>
    </table>

效果如下图👇👇👇
在这里插入图片描述

3.合并单元格

<table border="1" cellspacing="0" width="500" height="200">

        <!-- colspan="" 合并列 -->
        <!-- rowspan="" 合并行 -->
        <tr>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->

            <td></td>
            <td></td>
            <td colspan="3" rowspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>

        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <!-- <td colspan="3"></td> -->
            <!-- <td></td>
            <td></td> -->
        </tr>

        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <!-- <td colspan="3"></td> -->
            <!-- <td></td>
            <td></td> -->
        </tr>
        
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

效果如下图👇👇👇
在这里插入图片描述

4.表格的结构化

thead、tbody、tfoot可以提高表格的语义化， 可以让表格分段加载。

<table border="1" cellspacing="0" cellpadding="10">
        <!-- caption 表格的标题, 放到thead标签的前面 -->
        <caption>表格标题 课程表</caption>
        <thead>
            <tr>
                <th>节次/星期</th>
                <th>星期1</th>
                <th>星期2</th>
                <th>星期3</th>
                <th>星期4</th>
                <th>星期5</th>
                <th>星期6</th>
                <th>星期7</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th>第一节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <th>第二节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <th>第三节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <th>第四节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <th colspan="8">
                    第一学期课程表
                </th>
            </tr>
        </tfoot>
    </table>

效果如下图👇👇👇
在这里插入图片描述

前端畑鹿惊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Excel 文件结构化解析示例
Raqsoft
11-26 2180
【摘要】 本文介绍如何将各种结构的 Excel 文件解析成结构化数据，如普通行式、复杂表头、自由格式、交叉表、主子表、大文件等，并用 esProc SPL 举例实现。请点击Excel 文件结构化解析示例了解详情 在数据分析业务中，经常要把Excel文件数据结构化解析以后再进行计算或导入关系数据库，但许多Excel文件的格式并不规整，而且文件结构也多种多样，导致编程进行结构化的工作量会比较大，而且很难通用，每次都要针对文件格式进行分析后再进行开发。 本文将介绍如何进行各种格式的 Excel 文件结构.
HTML+CSS+JS-入门基础ppt课件.ppt
11-19
HTML 中的表格使用标签，例如：<table><tr>单元格1</td><td>单元格2</td></tr>。 HTML 中的表单使用标签，例如：<form><input type="text" name="username" />提交" />。 CSS 是一种层叠样式表语言，用于定义 ...
表格的结构化
爱是与世界平行
03-28 2595
分享一些学习到的HTMl表格的结构化知识，生活总是在不断学习中前进，尽管作为萌新（小白）有很多迷茫和未知，但还是要鼓起勇气继续学习和坚持。。
表格结构化标记如何进行应用—前端实操
yunduanaoligei的博客
11-29 196
今天分享下”表格结构化标记如何进行应用—前端实操“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。在讲网页表格的结构化标记之前，还是先看几幅图片。 Html表格的结构化 说白了的结构化，如同以上第一副图所显示，便是把大家的表格区划为三种：表头，表体，表尾。进而在我们在改动表体一部分的情况下，不容易直接影响到其他两一部分，进而消除了藕合，便捷大家的运用。 结构化格式 XML/HTML Code拷贝內容到剪贴板 …
HTML专题(三)-HTML表格和表单
08-29 500
1.表格标签 在早期，表格主要用于完成页面的整体布局和数据展示，但后来发现表格在页面布局上存在诸如代码复杂、不够灵活、降低页面的渲染速度等很多严重的问题，因此现在几乎没有网站再使用表格来进行页面的整体布局(某些局部位置除外)，而是使用更加灵活、强大的“DIV + CSS”来进行整体布局，这早已是一种约定俗成的做法。而现在，表格之所以还在大量使用，是因为表格在数据展示方面非常简单，并且表现优秀，通过...
Html网页表格结构化标记的应用
06-26 2159
在讲网页表格的结构化标记之前，还是先看几幅图片。        Html表格的结构化        所谓的结构化，正如上述第一副图所示，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响到其它两部分，从而解除了耦合，方便我们的应用。   结构化格式 … --------表头区 …---------表体区 …----------
实训四-HTML基础知识之表格化网页.pdf
10-07
表格标记是表格的单元格标记，包括单元格的背景颜色和背景图片等。 十二、 表格的排版作用 表格的排版作用是将网页的内容排版到表格中，包括表格的宽度、高度、边框宽度和边框颜色等。 十三、 HTML表格的制作提示...
Excel写入格式：通过MATLAB将数据写入Excel并格式化电子表格。-matlab开发
05-30
该程序适用于格式化字体（大小、名称等）、更改单元格内部（颜色、图案）、单元格范围（列宽、文本对齐）和边框（线型、粗细、颜色），作为一些处理/ 在应用这些之前执行检查。 但是，格式可以应用于 Range 接口的...
java-web-期末试题填空简答整理.doc
09-30
14. Div 层的隐藏和显示主要是用到 Display 属性，该属性的值为 none 时隐藏 Div 层。 15. 调试 Servlet 时，Eclipse 要进入 Debug 视图下。 16. Servlet 中会话跟踪技术的方案有 Cookie、Session 和 URL 重写等。...
大学计算机基础(大一)---笔试题库.doc
08-16
* 单元格编辑：输入、编辑、格式化、计算 * 数据分析：数据类型、函数、图表 知识点5: PowerPoint * 演示文稿：创建、编辑、格式化、播放 *幻灯片编辑：输入、编辑、格式化、排版 * 转换文稿：文本、图形、图表、...
JS中元素的属性（class、style）操作
北辰
10-08 2071
前提：已引入JQuery 1.去除元素的class属性 $("选择器").removeClass(类名) 2.给元素添加样式属性 $("选择器").css('border','3px solid red'); 3.removeAttr()方法从被选元素中移除属性 $("button").click(function(){ $("p").removeAttr("style...
表的详细结构描述
Rushinger
09-29 756
SELECT 表名=case when a.colorder=1 then d.name else '' end, 表说明=case when a.colorder=1 then isnull(f.value,'') else '' end, 字段序号=a.colorder, 字段名=a.name, 标识=case when COLUMNPROPERTY(a.id,a.name,'IsIdentity')=1 then '√'else '' end, 主键=case when exists(SELECT
Table表单之border边框操作
LaoYe的博客
09-18 2万+
border样式在平时我们使用的频率是非常高的，但是除了表单table之外，我们几乎都是一对一的使用，一般不会遇到什么问题。 而在table中众多的数据排列在一起，为了将各个数据隔开，我们就不得不使用boder进行操作。由于表格相对其他元素的特殊性，我们在对表单进行表格操作时，往往会遇到一些特殊的情况。 这不最近我在做后台管理时就经常需要和table打...
Table边框详解.
dibengpo4955的博客
03-22 131
大家都知道在HTML中当border="1" cellpadding="0" cellspacing="0" 的时候，表格样式很丑，有点“立体”的感觉，当改变边框颜色的时候，border看起来又会很粗，这是因为两个边重叠所造成的，那么如何做出上面的效果呢？跟着我的操作来吧。 代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD...
table标签中cellspacing和cellpadding,border的意思？
渔舟唱晚，响穷彭蠡之滨
04-24 7669
cellspacing：指定相邻单元格边框的间距,也就是某个单元格与它上下左右相邻单元格的距离 cellpadding：指定表格单元格与内容之间的间距,也就是某个单元格内中的文字内容与该单元格的边框的距离 border:指的是两个单元格之间的距离 ...
将word试卷匹配转换为结构化表格
热门推荐
小小明-代码实体的专栏
01-03 3万+
作者：小小明 Pandas数据处理专家，帮助一万用户解决数据处理难题。 需求 有一个下面这种形式的word表格： 希望能转换为下面这种格式的excel表格： 测试word文档读取 先测试一个word文档前1页的数据读取： from docx import Document doc = Document("编号02 质检员高级技师（一级）理论试卷.docx") for i, paragraph in enumerate(doc.paragraphs[:55]): print(i, parag.
table表格cellpadding和cellspacing设置
shuangyvshenshi的专栏
10-27 1988
表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式： 很多朋友会说表现在结构中，这样不符合标准，那如何将这个表现拿出来，有些朋友或许很迷惑。我们可以用table的border-collapse: collapse;属性 来代替cellspacing="0"，用th,td的padding: 0; 属性来代替cellpadding="0"。 table
Table布局核心：table标签设置 border="0" cellspacing="0" cellpadding="0"，td设置左边框和上边框，table设置下边框和右边框
qq_24511933的博客
02-22 8502
Table布局核心：table标签设置 border="0" cellspacing="0" cellpadding="0"，td设置左边框和上边框，table设置下边框和右边框 Document td{ border-left:1px solid red; border-top:1px solid red; padding:20px 40px; } table{ bord
Html-浅谈如何正确给table加边框
qq_45991812的博客
06-09 8728
Html-浅谈如何正确给table加边框
以下不属于非结构化数据的是：
最新发布
06-12
以下是非结构化数据的...结构化数据是指以表格形式存储的数据，每行代表一个实例，每列代表一个变量或属性，每个单元格包含一个值。例如，关系型数据库中的数据就是结构化数据。因此，结构化数据不属于非结构化数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端畑鹿惊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值