【HTML】５_表格
【摘要】 2、表格 基本使用方法主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理表格最初只是拥有三个标签，table、tr和td标签table：是用来标识这里是表格标签tr：是一行的内容，相当于一整行为单位，是一个大盒子td：是一行中具体的内容， <tabl...
2、表格
基本使用方法
主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
表格最初只是拥有三个标签，table、tr和td标签
table：是用来标识这里是表格标签
tr：是一行的内容，相当于一整行为单位，是一个大盒子
td：是一行中具体的内容，
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)
2.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)
3.表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table>
<tr>
<th>专业</th>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
</table>
</body>
</html>
我们可以给这个表格添加相关的属性，让它变得更规整些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tr>
<th>专业</th>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
</table>
</body>
</html>
合并单元格
合并单元格方式：
跨行合并：rowspan=“合并单元格的个数”
最上侧单元格为目标单元格, 写合并代码
跨列合并：colspan=“合并单元格的个数”
最左侧单元格为目标单元格, 写合并代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合并单元格</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
同时为了更好的标识表头个其他元素，我们可以再添加两个元素thead和tbody元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<thead>
<tr>
<th>专业</th>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>计科</td>
<td>2101</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
</tbody>
</table>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）