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"> ...
<!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>Document</title>
</head>
<body>
<!-- 2.1.2表格基本语法 -->
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>王</td>
<td>男</td>
<td>19</td>
</tr>
<!-- 要知道表格的作用是用来展示数据的 -->
</table>
<!-- 2.1.3表头单元格标签 -->
<!-- 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示 -->
<!-- <th>标签表示HTML表格的表头部分是table head的缩写 -->
td 与 th的区别在于th可以达到加粗的效果
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>王</td>
<td>男</td>
<td>19</td>
</tr>
<!-- 到这里为止我们发现表格表格，这么没有边框呢 -->
<!-- 2.1.4表格属性 -->
<!-- 表格标签这部分属性实际开发我们不常用，后面通过css来设置
目的有两个 1.这些单词，后面css需要使用2.直观感受表格的外观形态 -->
<table>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>描述</th>
</tr>
</table>
<table>
<tr>
<td>align</td>
<td>left.center.right</td>
<td>规定表格二相对周围元素的对齐方式</td>
</tr>
</table>
<table>
<tr>
<td>border</td>
<td>1或""</td>
<td>规定表格单元是否有边框，默认为"",表示没有边框</td>
</tr>
</table>
<table>
<tr>
<td>cellpadding</td>
<td>像素值</td>
<td>规定单元边沿与其内容之间的空白，默认1像素</td>
</tr>
</table>
<table>
<tr>
<td>cellspancing</td>
<td>像素值</td>
<td>规定单元格之间的空白，默认2像素</td>
</tr>
</table>
<table>
<tr>
<td>width</td>
<td>像素值或百分比</td>
<td>规定表格的宽度</td>
</tr>
</table>
<table align="center" border="1" cellpadding="20" cellspancing="0" width="20" height="5">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>王新桦</td>
<td>男</td>
<td>19</td>
</tr>
</table>
<!-- 小说排行榜的例题 -->
<table>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
</table>
<!-- 2.1.5表格结构标签 -->
<!-- 表格可能很长，为了更好的表示表格的词义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用:<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域 -->
<table align="center" width="500" height="249" border="1" cellspancing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
</tbody>
</table>
<!-- 2.1.6合并单元格 -->
<!-- 1合并单元格三部曲
2找到目标单元格。写上合并方式=合并的单元格数量。比如<td clospan="2"></td>
3删除多余的单元格 -->
<table align="center" width="500" height="249" border="1" cellspancing="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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）