HTML第二章 “表格”详解 （附带详细代码与解释）！！！
目录
1.表格的语法
2. 表格的可选标记
3. 表格的属性
4. 不规则的表格
5. 表格的大小
每日一句
1.表格的语法
- table标签: 表示表格的开始和结束。表格的所有内容都需要写在这一对标签里
- tr标签: 表示表格中的一行
- td标签：要写在tr中，这一行中有几个单元格，就有几列 是真正放数据的地方
2. 表格的可选标记
- caption标签:表格的标题
- thead标签:表头部分
- tbody标签:表的主体部分
- th标签:行/列的标题，文字加粗显示
<table border="1px" bgcolor="green" bordercolor="yellow" width="300px"height="175px"><caption>鲜鱼价目表</caption><thead><!-- 表头部分 --><tr><th>序号</th><th>鱼的种类</th><th>价格</th></tr></thead><tbody> <!--表主体部分--><tr align="center"><td>1</td><td>草鱼</td><td>18.6</td></tr><tr valign="top"><td>2</td><td>鲤鱼</td><td>28.9</td></tr><tr><td>3</td><td>食人鱼</td><td>1000</td></tr></tbody></table>
3. 表格的属性
- table标签的属性
- border="1px" 设置边框
- bgcolor="green" 设置背景颜色
- bordercolor="yellow" 设置边框颜色
- width="300px" 设置表格的宽度
- height="175px" 设置表格的高度
- table表格里的边框是带有间距的
- 解决方案就是给table标签加:
- style="border-collapse: collapse;"
- 去掉边框间的间距
- align="center" 设置表格本身的水平对齐方式，注意不是文字居中，而是整张表格在页面居中显示
- tr标签的属性
- align="" 设置内容的水平对齐方式 left靠左/center居中/right靠右
- valign="" 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下
<!-- 开始编辑第3个表格 --><table border="1px" style="border-collapse: collapse;" width="500px" height="300px" align="center"><caption>水果一览表</caption><thead><tr><th>编号</th><th>品种</th><th>价格</th><th>产地</th></tr></thead><tbody><tr bgcolor="green" align="center" valign="top"><td>1</td><td>红富士</td><td>12.5</td><td>山东</td></tr><tr><td>2</td><td>水蜜桃</td><td>16.8</td><td>平谷</td></tr><tr><td>3</td><td>西瓜</td><td>22.6</td><td>海南</td></tr></tbody></table>
4. 不规则的表格
- td标签的属性:
- colspan="n" 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)
- rowspan="n" 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)
- 被合并的单元格一定得删除！
5. 表格的大小
- 表格的大小是由内容撑起来的
- 但如果修改了某个单元格的高度，这一行单元格的高度都会随之改变
- 同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变
<!-- table>tr*3>td*4 在数字后按Tab补全--><table border="1px" width="300px" height="200px"><tr><td colspan="2">1-1</td><!-- 被合并的单元格一定得删掉 --><!-- <td>1-2</td> --><td>1-3</td><td>1-4</td></tr><tr><td>2-1</td><td rowspan="2">2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><!-- 被合并的单元格一定要删掉！ --><!-- <td>3-2</td> --><td>3-3</td><td>3-4</td></tr></table><hr><table border="1px"><tr><td>1</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td>2222222222222</td><td></td><td></td></tr><tr><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></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>
每日一句
三人行，必有我师焉，择其善者而从之，其不善者而改之。
"三个人在一起，其中必有某人在某方面是值得我学习的，那他就可当我的老师。我选取他的优点来学习，对他的缺点和不足，我会引以为戒，有则改之。 "
HTML第二章 “表格”详解 （附带详细代码与解释）！！！相关推荐
- 第二章 表格及样式入门 ③ 详细代码演练、解析
第二章 表格及样式入门 ③ 详细代码演练.解析 一.table表格 tr td 商标符号 版权符号 二.学生信息表 表格标签属性 三.css样式优先级 开发者模式修改 四.外部样式 内部样式 标签选择 ...
- android Json解析详解（详细代码）
android Json解析详解(详细代码) JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当 ...
- Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言 如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...
- Nuxt - 实现微信扫码登录功能（SSR 服务端渲染项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言 如果您需要 Vue.js 版本的教程,请访问 Vue.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 0 ...
- 【正点原子FPGA连载】 第三章 硬件资源详解 摘自【正点原子】DFZU2EG/4EV MPSoC 之FPGA开发指南V1.0
1)实验平台:正点原子MPSoC开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=692450874670 3)全套实验源码+手册+视频下载地址: h ...
- 【前端就业课 第一阶段】HTML5 零基础到实战（六）表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...
- Easypoi使用模板导出文档或excel表格详解
Easypoi使用模板导出docx文档或excel表格详解 **doc或docx文档的模板导出** **Excel的模板导出** 话不多说先上依赖 <dependency><grou ...
- Java 泛型详解(超详细的java泛型方法解析)
Java 泛型详解(超详细的java泛型方法解析) 1. 什么是泛型 泛型:是一种把明确类型的工作推迟到创建对象或者调用方法的时候才去明确的特殊的类型.也就是说在泛型使用过程中,操作的数据类型被指定为 ...
- SpringMVC异常处理机制详解[附带源码分析]
SpringMVC异常处理机制详解[附带源码分析] 参考文章: (1)SpringMVC异常处理机制详解[附带源码分析] (2)https://www.cnblogs.com/fangjian0423 ...
最新文章
- Symantec BE 12.5 备份Exchange错误排除
- 高校网站群建设方案简介
- gluPerspective和gluLookAt的关系
- 移动应用安全初创企业Seworks获820万美元A轮融资
- java static调用吗_Java中的static的使用
- pc版android sd卡,告别瓶颈：安卓闪存（SD卡）I/O优化
- SecureCRT终端仿真程序下载及安装使用
- Linux Shell数值比较和字符串比较及相关
- Java 窗口菜单
- http-server搭建web服务器
- 最大似然估计MLE和最大后验概率MAP
- Firebug工具离线安装
- 简单几步开启Mac访问NTFS格式读写
- 【DataBase Notation(1/3)】Notation_Chen, Crow‘s Foot and UML
- HHUOJ 1887 班级聚会上的游戏
- synergy使用方法和安装包
- 【Leetcode】469. Convex Polygon
- 解决Class “xxx“ can not access a member of class “xxx“ with modifiers “private“
- Python数据分析案例18——化学分子数据模型(机器学习分类问题全流程)
- 【挑战学习一百天冲刺实习面试】第二十二天：全面理解BIO、NIO、AIO（完结）