表格
在Web的历史中,HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据,后来表格变成了一个极受欢迎的布局工具。
但是有了CSS以后,CSS在布局网页方面实际上会更出色,所以现在我们使用表格的作用只有一个,就是用来表示格式化的数据。
table表格的基本结构
表格的创建
行、列、单元格
特点:通常情况下,同行的高度一致,同列表的宽度一致。
创建一个表格:
<body>
<!--
table--创建表格
tr--定义表格中的行
td--定义表格数据
-->
<table>
<!-- tr--定义表格中的行 -->
<tr>
<!-- th-表示表头 -->
<th>111</th>
<th>2222</th>
</tr>
<tr>
<!-- td--定义表格数据(定义单元格中的内容) -->
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
此时发现没有线,需要借助我们后面学的表格属性。
创建快捷方式:table>(tr>td2)2 或者 table>tr2>td2
表格属性
宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 align=“left/right/center”
cellspacing=“单元格与单元格之间的间距”
cellpadding=“单元格与内容之间的空隙”
<body>
<!--
给表格table设置属性
border 外边框
width 宽度,支持px,百分比-相对于父元素的百分之多少
table的父元素是body,就是内容的即窗口的宽度
height 高度,支持px,百分比-相对于父元素的百分之多少
现在相当于body,高度是靠内容给撑开的(比如建楼,宽度是地基的宽度,高度是楼垒高起来最后的高度)
align 水平对齐方式:left/center/right
bordercolor 边框颜色
bgcolor 背景颜色
cellspacing 单元格直接的间距
cellpadding 单元格与内容之间的空隙
-->
<table
border="1"
width="50%"
height="500px"
align="center"
bordercolor="red"
bgcolor="yellow"
cellspacing="0"
cellpadding="100"
>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
我们是对整个表格进行设置的属性,怎么改变某一行或者某一列的宽高背景颜色呢?
行tr 属性
高度 height
背景颜色 bgcolor
文字水平对齐 align=“left/center/right”
文字垂直对齐 valign=“top/middle/bottom”
tr —> table row的缩写
<body>
<!--
tr-table row的缩写
height 高度
bgcolor 背景颜色
align 文字水平对齐 left/center/right
valign 文字垂直对齐,top/middle/bottom
-->
<table border="1" width="300" bgcolor="yellow" align="center">
<!-- 可以设置高度,不能设置宽度,因为行是对于整个行,不能改变列 -->
<tr
bgcolor="orange"
height="300px"
align="center"
valign="center"
>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
单元格td属性
宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=“left/center/right”
文字垂直对齐 valign=“top/middle/bottom”
td —> table data 存放数据的这样一个地方,表示表格中的一个单元格。
<body>
<!--
td: width 如果一个单元格设置宽度,影响的是一整列的宽度
height 如果一个单元格设置高度,影响的是一整行的高度
bgcolor 控制某一个单元格的背景颜色
align 文字水平对齐left/center/right
valign 文字垂直对齐top/middle/bottom
-->
<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr>
<td width="200">1</td>
<td height="200">2</td>
</tr>
<tr>
<td bgcolor="red">3</td>
<td align="right" valign="top">4</td>
</tr>
</table>
</body>
合并单元格
表格合并列
Colspan=“所要合并的单元格的列数”,必须给td。
如:Colspan=“2”
Rowspan=“所要合并的单元格的行数”,必须给td。
如:Rowspan=“5”
举例:
<body>
<table style="margin-top: 100px;" border="1" width="400" height="300" cellspacing="0" align="center">
<tr align="center">
<td colspan="2"> 甄嬛 </td>
<!-- <td colspan="2" rowspan="2"> 皇后 </td> -->
<!-- <td> 祺贵人 </td> -->
</tr>
<tr align="center">
<td rowspan="2"> 敬妃 </td>
<!-- <td colspan="2"> 安小鸟</td> -->
<!-- <td> 眉姐姐 </td> -->
</tr>
<tr align="center">
<!-- <td> 齐妃</td> -->
<!-- <td> 华妃</td> -->
<td colspan="2"> 端妃</td>
</tr>
</table>
</body>