首页 / 知识
前端HTML & CSS 基础入门——表格
2023-04-11 14:08:00
表格的基本结构
表格是网页上最常见的元素，它除了可以用来展示数据，还常常被用来排版。虽然现在提倡使用DIV+CSS完成页面布局，但表格框架简单明了，对于繁杂的数据，一个简洁的表格能让其展现的极有条理。
简单来说，表格是由行、列（单元格）组成。表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行又由若干单元格（即列，由 <td> 标签定义）组成。表格单元格里可以包含文本、图片、列表、段落、表单、水平线、表格（嵌套）等等。
别罗嗦，看代码。
下面的代码是一个两行两列的表格。
表格默认是没有边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。
表格除了行<tr>和单元格<td>，还可以有标题<caption>和表头<th>。另外，表格的语义化还将表格分为表格页眉<thead>、表格主体<tbody>、表格页脚<tfoot>三个部分。引入语义化，能够让表格结构更清晰、代码语义更良好。
下面的示例代码加入了标题和表头，同时引入了表格语义化，将表格分为页眉、主体。页脚三个部分，表格语义化是否添加不会影响到表格的显示效果。
表格默认是没有边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。
在表格的实际应用中，经常需要将表格相邻的两个或多个单元格合并，以满足不同长度或不同类型的数据展示。
<td>标签的【rowspan】属性可以实现合并行，<td rowspan="合并的行数">
<td>标签的【colspan】属性可以实现合并列，<td colspan="合并的列数">
示例代码：
表格默认是没有边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。
表格默认是没有边框的，我们可以使用border属性为table设置边框。上面的代码都是加入边框，可以看到，表格都是双线条边框，这是由于 table、th 以及 td 元素都有独立的边框。【border-collapse】属性可以设置是否把表格边框合并为单一的边框，该属性的取值主要有两个，值【separate】为默认值，表示边框分开不合并，值【collapse】为合并边框。
当表格的边框属性【border-collapse】的值为默认值【separate】，即边框分开时，我们还可以利用属性【border-spacing】来设置相邻单元格的边框间的距离。该属性可以设置一个或两个像素值，当设置一个像素值时，表示水平和垂直间隔为同一值；如果设置了两个值，则第一个为水平间距，第二个为垂直间距。
|
最新内容
相关内容
python数据分析相关的技术
python数据分析相关的技术，分析，数据，培训，技术，
python网络编程及前端常见问题
python网络编程及前端常见问题，数据，服务，分析，培训，状态，前端，区别，服务器，常见问题，上面，当我们学习Python时，需要掌握的的知识有很多，除了有
python怎么获取列表元素的索引
python怎么获取列表元素的索引，培训，索引，元素，结果，列表，方法，中值，本文，下面，以上，本文主要介绍了python中如何获取列表的索引，以及如何返回
pythonpython的优势是什么
pythonpython的优势是什么，发展，环境，基础，培训，工作，市场，首次，数据，人工智能，能力，python是一门伟大的入门语言。作为一门伟大的编程语言，一
python类的继承机制
python类的继承机制，代码，培训，方法，定义，对象，机制，口感，语法，圆括号，水果，继承是面向对象的三大特征之一，也是实现代码复用的重要手段。继承
python带有yield的函数在Python中
python带有yield的函数在Python中如何使用，培训，异常，函数，生成器，结果，表达式，后边，语句，场景，关键字，yield的函数在Python中的使用yield在
python循环的elif报错是什么原因
python循环的elif报错是什么原因，培训，数据，语句，条件，结果，变量，使用方法，程序，更多，内容，python循环的elif报错：else和elif语句也可以叫做子
python列表和元祖之间的区别
python列表和元祖之间的区别，数据，培训，设计，名字，类型，区别，同构，列表，不同点，操作，python列表和元组的区别如下相同点：都是序列类型回答它们
python类和函数的区别是什么
python类和函数的区别是什么，代码，名称，培训，信息，函数，圆括号，字符串，冒号，表达式，文档，python类(Class):用来描述具有相同的属性和方法的对
python一个数的平方怎么表示
python一个数的平方怎么表示，培训，平方根，个数，函数，模块，表示，方法，表达式，实例，下面，用python进行数学计算，可以使用python内置的函数模块，下
python如何求一个数的平方
python如何求一个数的平方，培训，平方根，个数，整数，函数，模块，方法，小数，表达式，数值，用python进行数学计算，可以使用python内置的函数模块，下面
pythonpython是前端语言吗?
pythonpython是前端语言吗?，代码，互动，培训，平台，标准，设计，语言，前端，语法，解释性，python语言属于后端开发语言。Python是一个高层次的结合