Web前端，HTML表格相关标签和属性，在网页中表格结构的显示
一、表格的基本标签
场景:
在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表
代码
<!-- table 包含 tr, tr包含td --><table border="1" width="600" height="400"><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>战三</td><td>100分</td><td>孩砸, 真棒啊</td></tr><tr><td>丽丽</td><td>150分</td><td>丽丽最美了</td></tr></table>
基本标签:
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
注意点:
• 标签的嵌套关系:table > tr > td
小结
完成一个简单的表格，需要由几个标签组成?分别表示什么?
• table标签:表格整体
• tr标签:表格每行
• td标签:对于主题的每一项内容
表格基本标签的嵌套关系是什么?
• table > tr > td
二、表格相关属性
场景:
设置表格基本展示效果
代码
<table border="1" width="600" height="100"><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>小哥哥</td><td>100分</td><td>孩砸, 真棒啊</td></tr><tr><td>小姐姐</td><td>100分</td><td>小姐姐，你考的真漂亮</td></tr><tr><td>总结</td><td>郎才女貌</td><td>郎才女貌</td></tr></table>
常见相关属性:
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意点:
• 实际开发时针对于样式效果推荐用CSS设置
小结
给表格添加边框，可以使用什么属性完成?
• border属性
设置表格整体的宽高，可以使用什么属性完成?
• width属性:表格整体的宽度
• height属性:表格整体的高度
三、表格标题和表头单元格标签
场景:
在表格中表示整体大标题和一列小标题
代码
<table border="1"><caption><strong>学生成绩单</strong></caption><tr><!-- <td></td> --><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>张三</td><td>100分</td><td>真棒, 第一名</td></tr><tr><td>李四</td><td>99分</td><td>真棒, 第二名</td></tr><tr><td>总结</td><td>郎才女貌</td><td>真棒, 相亲成功</td></tr></table>
其他标签:
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部剧中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意点:
• caption标签书写在table标签内部
• th标签书写在tr标签内部(用于替换td标签)
小结
表示表格整体大标题，使用什么标签完成?书写在什么位置?
• 表格整体大标题:caption标签
• 书写在table标签内部
在表格第一行设置一列的小标题，使用什么标签完成?书写在什么位置?
• 表头单元格:th标签
• 书写在tr标签内部(用于替换td标签)
四、表格的结构标签(了解)
场景:
让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰
结构标签:
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意点:
• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略
小结
表格的结构标签分别有哪些?表示什么含义?
• thead:表格头部
• tbody:表格主体
• tfoot:表格底部
表格结构标签书写在什么位置?
• 表格结构标签写在table标签内部
• 表格标签内部用于包裹tr标签
五、合并单元格
合并单元格-思路
场景:
将水平或垂直多个单元格合并成一个单元格
合并单元格-代码实现
合并单元格步骤:
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他 - 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元的个数 | 跨列合并，将多列的单元格水平合并 |
注意点:
• 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨:thead、tbody、tfoot)
小结
合并单元格的步骤分哪几步?
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他 - 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
• rowspan:跨行合并→垂直方向合并
• colspan:跨列合并→水平方向合并
可以跨结构标签合并单元格吗?
• 不能
总结
表格基本标签:table > tr > td
表格标题和表头单元格标签:table > caption + tr > th
表格结构标签:table > thead > tr > td
表格相关属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
合并单元格步骤
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他 - 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元的个数 | 跨列合并，将多列的单元格水平合并 |
Web前端，HTML表格相关标签和属性，在网页中表格结构的显示相关推荐
- css table表格相关设置和属性
css table表格相关设置和属性 文章目录 css table表格相关设置和属性 前言 一.表格结构 二.使用行内样式控制表格样式 1.属性 2.使用css控制表格的样式 前言 记录表格的结构,属 ...
- CSS 使用 a 标签的 mailto 属性在网页中链接 Email 地址(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- Web前端--HTML+CSS+JavaScript响应式网络科技网页设计
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- Web前端期末大作业-响应式室内家具网页设计（HTML+CSS+JS）实现
作者主页:Java李杨勇 文末获取源码联系 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想 ...
- 网页中表格的用法和属性设置
网页中的表格有四种标签:<table>,<tbody>,<tr>,<th>,<td> <table>:表格的主体标签,有这个标签 ...
- 如何在html中做一个表格模板,【网页中表格教案】教案表格模板
第三课 在网页中插入表格 一.教材分析 网页制作中用表格来规划整个网页的布局,是我们设计制作网页常用的手法.所以学会在网页中插入表格是网页制作中的一个重要的部分.本课的主要内容包括在网页中插入表格,表 ...
- delphi html table,delphi 使用webbrowser取得网页中表格（Table）内容的正确方法
今天偶然需要取得网页中表格的内容,找了好久竟然都找不到,盒子中也没有,大富翁上也没有找到. 想了半天,貌似03年的某个资料上有,翻到了赶紧记下来,一个泛类型的简单应用. csdn上面只有问的,没有答对 ...
- 高中计算机表格制作,高中信息技术《在网页中插入表格》说课稿
高中信息技术<在网页中插入表格>说课稿 尊敬的各位评委.各位老师,大家好!我是来自玉林市第一中学的杨晓洁老师,我今天说课的题目是<在网页中插入表格>,本节课我准备从以下几个方面 ...
- Web前端开发笔记——第二章 HTML语言 第七节 表格标签
目录 一.表格标签的定义 二.表格标签的属性 (一)边框属性 (二)单元格属性 三.表格标签的表头 表头属性 四.表格标签的标题 五.表格标签的嵌套 结语 一.表格标签的定义 在html中,表格标签表 ...
最新文章
- Windows窗体透明效果
- cms和mysql区别_CMS不要让MySQL为你流泪
- 终于有人把 Elasticsearch 原理讲透了
- 向不支持输入法的软件输入中文
- docker 2376端口 CA 认证，并不能阻止服务器成为肉鸡
- 0804------算法笔记----------最长公共子序列
- maven jdk 8 Error while generating Javadoc 或者 Error while creating archive
- 【附Python版教学】“那些年用过的奇葩辞职理由”哈哈哈，看完笑掉牙。
- 小故事有大能量（爱情故事）
- APIO2016滚粗记
- delphi的函数round、trunc、ceil、floor 和RoundTo
- 读 孙卫琴《Tomcat与Javaweb开发技术详解》
- 图像滤镜艺术---水彩画滤镜
- 域名申请需要多长时间？域名申请后多久能使用？
- 微信公众平台开发(100) 2048游戏
- 【EtherCAT实践篇】四、TwinCAT 3实验1-基本操作
- PyTorch深度学习入门 || 系列（四）——非线性回归
- java实现图片上传至本地
- 网站虚拟空间常见参数介绍 如何选好主机空间
- keil5 中的wraing：no previous prototype SystemInit