Web表格

时间:2024-01-18 19:40:38

HTML元素学习

1:表格:表格的作用是显示表格数据,小范围内布局

表格的框架

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TableDemo</title>
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head> <body>
<table border = "10px" width = "400px">
<caption>Calories&Fat</caption>
<tr height = "40px">
<!--表头,表头为Menuitem calories Fat(g)-->
<th>Menu item</th>
<th>Calories</th>
<th>Fat(g)</th>
</tr>
<tbody align = "center"><!--居中-->
<tr >
<td>Chieck noold soup</td>
<td>120</td>
<td>2</td>
</tr> <tr >
<td>Caesar salard</td>
<td>400</td>
<td>26</td>
</tr>
</tbody>
</table> </body>
</html>

要点:

一次定义,处处使用:<tbody></tbody>,用来设置表格的属性;

 border = "10px" width = "400px" 设置表格属性
 <caption>Calories&Fat</caption>设置表头

aaarticlea/png;base64,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" alt="" />

单元格合并:

左右合并用 colspan = "2";后面接单元格的个数(包含自己),并删除后面合并的个数

上下合并  rowspan= "2";后面接单元格的个数(包含自己),并删除后面的个数;