表格-table
实际代码如下:
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>title1</th>
<th>title1</th>
<th>title1</th>
</tr>
</thead>
<tbody>
<tr>
<td>content1-1</td>
<td>content1-2</td>
<td>content1-3</td>
</tr>
<tr>
<td>content2-1</td>
<td>content2-2</td>
<td>content2-3</td>
</tr>
</tbody>
</table>
显示效果:
在HTML中使用表格,其标签名为table
,它有一个属性名border
,用于设置表格线条的粗细,这里设置了1
。
<caption>
:顾名思义,这个标签的意思是指表格的标题,且该元素必须是table
下的第一个元素。
<thead>
:表格里通常会有具体的字段信息,例如姓名,年龄,性别等,而这些字段信息可以放在该标签中。
<tbody>
:表格中具体的内容信息,即对应字段的内容信息则放在这个标签中。
<tr>
:表示表格的一行,使用一对<tr></tr>
表示一行,多个表示多行。
<th>和<td>
:表示表格的一列,要嵌套在<tr>
中使用。多对使用表示多列。而<th>
和<td>
的区别在于<th>
是在<thead>
下的<tr>
中的,而<td>
只要是在<tr>
下就能其作用。
在<td>
中有一个属性colspan
,表示合并列,它的值是一个数值,表示合并几列。
修改上述代码的最后一对<tr>
:
<tr>
<td>content2-1</td>
<td colspan="2">content2-2</td>
</tr>
效果如下: