HTML 表格
表格由 table 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td
指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格的基本结构
<table>…</table>:定义表格
<th>…</th>:定义表格的标题栏(文字加粗)
<tr>…</tr>:定义表格的行
<td>…</td>:定义表格的列
<th>…</th> 定义表格表头,也就是表格的头部
<tb>…</tb>定义表格表身,也就是表格的主体内容。
<tf>…</tf> 定义表格表尾,也就是表格的结尾。
table标签定义HTML表格。
一个 HTML 表格包括
元素,一个或多个 、tr、th、和 td、元素。- tr 元素定义表格行,
- th 元素定义表头,
- td 元素定义表格单元。
表格 | 描述 |
---|---|
table | 定义表格 |
caption | 定义表格标题。 |
th | 定义表格的表头。 |
tr | 定义表格的行。 |
td | 定义表格单元。 |
th | 定义表格的页眉。 |
tb | 定义表格的主体。 |
tf | 定义表格的页脚。 |
表格样式属性:
属性 | 作用 |
text-align: left center right | 规定表格相对周围元素的对齐方式。 |
background-color rgb(x,x,x) #xxxxxx colorname | 规定表格的背景颜色。 |
border:1px solid red | 规定表格单元是否拥有边框。 |
padding | 单元格内边距 |
margin | 单元格外边距 |
border-color rgb(xxx) 、#fffff | 设置把表格的边框线颜色 |
height | 规定表格的高度。 |
width | 规定表格的宽度。 |
rowspan 2 | 合并垂直水平方向的单元格 |
colspan 2 | 合并水平方向单元格 |
<table> 标签的常用属性:
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
cellpadding="5" 单元格的上下间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色
<tr> 标签的常用属性:
bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
<td>、<th> 标签的常用属性:
width="500" 单元格的宽度,设置后对当前一列的单元格都有影响
height="100" 单元格的高度,设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)
代码演示:
<table style="border: 1px solid red"> <!--table标签表格 -->
<tr>
<th rowspan="2">12</th><!-- rowspan 跨列-->
<td colspan="2">13</td><!--colspan 跨行-->
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
<ul> <!--无序表格-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol> <!--有序表格-->
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</li>
</ol>
效果演示: