
表格的基本结构
表格是网页上最常见的元素,它除了可以用来展示数据,还常常被用来排版。虽然现在提倡使用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】来设置相邻单元格的边框间的距离。该属性可以设置一个或两个像素值,当设置一个像素值时,表示水平和垂直间隔为同一值;如果设置了两个值,则第一个为水平间距,第二个为垂直间距。
|