一、表格介绍
table：代表是一个表格
caption:表头，例如 商品库存表
tr：每行
td：每列名，左对齐
th：每列明，右对齐
border，width：控制表格边框
image.png
image.png
二、表格基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
</head>
<body>
<table border = "1px" width = "600px" >
<caption>用户信息表</caption>
<tr>
<th>姓名</th>
<th>密码</th>
<th>邮箱</th>
</tr>
<tr>
<td>xm1</td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>xm2</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
</html>
image.png
二、行，列合并
行合并以上面的为依据，列的合并以左边的为依据
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
</head>
<body>
<table border = "1px" width = "600px" >
<caption>用户信息表</caption>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
<tr>
<th rowspan="2">家电类</th>
<th>冰箱</th>
<th>台</th>
<th>520</th>
</tr>
<tr>
<th>洗衣机</th>
<th>台</th>
<th>13</th>
</tr>
<tr>
<th>辅料</th>
<th>插线板</th>
<th>个</th>
<th>14</th>
</tr>
<tr>
<th colspan="4">备注：</th>
</tr>
</table>
</body>
</html>
image.png
三、属性标签：用于分组设置表格的格式,页眉，内容部分，页脚的设置
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
</head>
<body>
<table border = "1px" width = "600px" >
<caption>库存商品表</caption>
<thead>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">家电类</th>
<th>冰箱</th>
<th>台</th>
<th>520</th>
</tr>
<tr>
<th>洗衣机</th>
<th>台</th>
<th>13</th>
</tr>
<tr>
<th>辅料</th>
<th>插线板</th>
<th>个</th>
<th>14</th>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">备注：</th>
</tr>
</tfoot>
</table>
</body>
</html>
四、对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
</head>
<body>
<table border = "1px" width = "600px" height="500px">
<caption>库存商品表</caption>
<thead>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<!--冰箱设置为顶部对齐，valian定义在列组合中内容的垂直对齐方式-->
<td rowspan="2">家电类</td>
<td valign="top">冰箱</td>
<td>台</td>
<td>520</td>
</tr>
<tr>
<td>洗衣机</td>
<td>台</td>
<td>13</td>
</tr>
<tr>
<td>辅料</td>
<td>插线板</td>
<td>个</td>
<td>14</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">备注：</td>
</tr>
</tfoot>
</table>
</body>
</html>
image.png
五、表格边框与单元格边框
表格边框
单元格边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
</head>
<body>
<table border = "1px" width = "600px" frame="void">
<caption>库存商品表</caption>
<thead>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<!--冰箱设置为顶部对齐，valian定义在列组合中内容的垂直对齐方式-->
<!--台设为居中对齐-->
<td rowspan="2">家电类</td>
<td valign="top" bgcolor="red">冰箱</td>
<td align = "center">台</td>
<td>520</td>
</tr>
<tr>
<td>洗衣机</td>
<td>台</td>
<td>13</td>
</tr>
<tr>
<td>辅料</td>
<td>插线板</td>
<td>个</td>
<td>14</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">备注：</td>
</tr>
</tfoot>
</table>
</body>
</html>
image.png
网友评论