<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<!--
表格
table 表示表格
tr 表示表格中的行 (每一行可以包含一个或多个td/th)
td 表示表格中标准单元格
th 表示表格中的表头(具有标题的效果 字体加粗 居中)
table常用属性
border 表格的边框
width 表格的宽度
像素或者百分比(如果是百分比,参考的是上一级元素的宽度,如果上一次元素未设置,则参考屏幕宽度)
height 表格的高度
align 表格的对齐方式(left right center)
tr 常用属性
align 每行中文本内容的水平方向对齐方式(left right center)
valign 每行中文本内容的垂直方向对齐方式
bgcolor 行的背景颜色
css样式
border-collapse: collapse 合并表格边框
合并单元格
<td>的colspan和rowspan分别规定单元格横跨的列数和行数
纵向合并 rowspan
横向合并 colspan
-->
<body>
<table border="1" width="500px" style="border-collapse: collapse" align="center" >
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td rowspan="2">101班</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr align="center">
<td>101班</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>
HTML5零基础-10-表格
最新推荐文章于 2022-09-08 11:21:13 发布