HTML笔记：表格属性介绍
HTML笔记：表格属性介绍
三桥君
发布于 2025-08-28 11:38:17
发布于 2025-08-28 11:38:17
代码可运行
运行总次数：0
代码可运行
摘要：微信搜索【三桥君】 说明：这是关于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"> 文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【三桥君】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
