摘要：微信搜索【三桥君】
说明：这是关于HTML5的代码笔记
一、理论知识
表格标签
caption：表格标题
table：表格内容
tr：若干行
th：表头的表列
td：表体的表列
语义化标签
thead：表头内容
tbody：表体内容
tfood：表尾内容
注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
二、参考示例
1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<style>
table{
border-collapse: collapse;
table-layout: fixed;
}
tr{
align-items: center;
}
th{
font-size: 10px;
}
td{
font-size: 5px;
}
thead{
background-color: aquamarine;
}
</style>
<body>
<caption>表格标题</caption>
<table border="1" cellpadding="10" cellspacing="20">
<thead >
<tr>
<th>班级名次</th>
<th>科目</th>
<th>搜课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
<th>试听</th>
<th>购买</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td rowspan="3">真题精解班</td>
<td>行测+申论</td>
<td>全科历年真题精解</td>
<td rowspan="3">课后赠2套模拟卷<br>24小时以内答疑</td>
<td>48</td>
<td><font color="red">1280元</font></td>
<td>图片</td>
<td>图片</td>
</tr>
<tr align="right">
<!-- <td>真题精解班</td> -->
<td>行测</td>
<td>行测历年真题精解</td>
<!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
<td>32</td>
<td>980元</td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<!-- <td>真题精解班</td> -->
<td>申论</td>
<td>申论历年真题精解</td>
<!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
<td>16</td>
<td>580元</td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<td rowspan="3">高分技巧班</td>
<td>行测+申论</td>
<td>全科技巧强化</td>
<td rowspan="3">入学试卷测评<br>24小时内答疑</td>
<td>32</td>
<td><font color="red">980元</font></td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<!-- <td>高分技巧班</td> -->
<td>行测</td>
<td>行测速解技巧强化</td>
<!-- <td>入学试卷测评24小时内答疑</td> -->
<td>18</td>
<td>680元</td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<!-- <td>高分技巧班</td> -->
<td>申论</td>
<td>申论速解技巧强化</td>
<!-- <td>入学试卷测评24小时内答疑</td> -->
<td>14</td>
<td>580元</td>
<td>图片</td>
<td>图片</td>
</tr>
</tbody>
</table>
</body>
</html>
2、结果
三、问答
1、如何使表格框线没有间距，变为实心线？
在table标签中加 border=“1”
<table border="1" cellpadding="10" cellspacing="20">
2、如何定义表格尺寸？
在table标签中加 cellpadding=“10” cellspacing=“20”
<table border="1" cellpadding="10" cellspacing="20">
3、如何改变表格内字体颜色？
<td><font color="red">1280元</font></td>
4、如何合并表格的列？
<td rowspan="3">真题精解班</td>
5、如何合并表格的行？
<td colspan="3">真题精解班</td>
6、如何使表格内文字上下对齐？
<tr valign="top">
7、如何使表格内文字左右对齐？
<tr align="right">
文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【三桥君】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~