表格标签
作用：用于显示和展示数据的，可以让数据显示的非常规整，可读性较高，特别是后台显示数据的时候。
<!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>
<!-- table:表格标签 tr:行标签 td：单元格标签 表格标签需要嵌套使用，表格用于展示数据 caption标签：添加表格标题 -->
<table>
<caption>明星信息</caption>
<tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr>
<tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>50</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>57</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>54</td> </tr>
</table>
<br>
<br>
<br>
<!-- 表头单元格标签 th:table head ,让表格第一行或者第一列加粗居中显示 -->
<table>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>50</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>57</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>54</td> </tr>
</table>
<br>
<br>
<br>
<!--表格属性：需要写入到表格标签里面，一般使用css来设置，不经常使用 -->
<!--
align:left center right 规定表格相对周围元素的对齐方式
border: 1 空 规定表格有没有边框，默认为空即 border="";
cellpadding: 规定文字距离单元格边框的距离大小，单位是像素,默认1像素
cellspacing:规定单元格之间的空白，默认2像素，单位是像素
width：规定表格宽度 值为像素值或者百分比都可以
-->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>50</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>57</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>54</td> </tr>
</table>
<br>
<br>
<br>
<!-- 表格的结构标签：为了更好的表示表格，可以将表格分割成 表格头部：thead 表格主体：tbody 这两个标签 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
<thead>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
</thead>
<tbody>
<tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr>
<tr> <td>张学友</td> <td>男</td> <td>50</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>57</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>54</td> </tr>
</tbody>
</table>
<br>
<br/>
<hr>
<br>
<br>
<!-- 合并单元格 -->
<!--
目标单元格:书写合并代码的单元格
跨行合并: rowspan="合并单元格个数",代码书写位置:最上面一行的单元格
跨列合并: colspan="合并单元格个数",代码书写位置:最左侧一列的单元格
合并单元格步骤:
1.确定跨行还是跨列
2.找到目标单元格
3.删除多余单元格
-->
<h1>4*4模板</h1>
<table align="center" cellspacing="0" height="250" width="500" border="1">
<!-- 4*4单元格为例 -->
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<h1>合并后</h1>
<table align="center" cellspacing="0" border="1" height="250" width="500">
<tr>
<th colspan="4">个人简历</th>
<!--
<th></th>
<th></th>
<th></th>
这三个被删除了
-->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3">照片</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<!-- <td></td> 被删 -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<!-- <td></td> 被删 -->
</tr>
</table>
</body>
</html>
1911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
