表格的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--
表格:
<table border="设置表格边框的粗细 单位(px)" width="设置表格的宽度" height="设置表格的高度"
cellspacing="单元格之间的间距" cellpadding="单元格内的文字与单元格边框的距离">
<tr 行标签>
<td 列></td>
</tr>
</table>
在td标签上两个属性
rowspan:行合并 如:rowspan="2" 合并两行
colspan:列合并 如:colspan="3" 合并三列
表格的特性:等宽等高。当你设置一个单元的大小时,与它同一行的其他单元格的高度跟它一样,与它同一列的宽度跟它一样
-->
</head>

<body>
<!--两行三列表格-->
<table border="1px" width="500px" height="500px">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>

</tr>
<tr>
<td></td>
<td></td>

</tr>
</table>
<br>
<br>
<br>
<!--三列两行-->
<table border="1px" width="500px" height="500px">
<tr>
<td></td>

<!--如果占了后面的列合并了,就把后面的列给删了-->
<td colspan="2"></td>

</tr>
<tr>
<!--如果占下面的列就把下面行的列删除-->
<td rowspan="2"></td>
<!--如果占了两行两列,就把所占的本行列和下一行列给删除了-->
<td colspan="2" rowspan="2"></td>

</tr>
<tr>


</tr>
</table>
<br><br><br>
<!--两行两列的表格,去边框线border后可以实现布局效果-->
<table border="1px" width="300px" height="300px" cellspacing="20px" cellpadding="20px">
<tr>
<!--td可以加宽高的属性-->
<td width="50px" height="50px">数学</td>
<td>语文</td>
</tr>
<tr>
<td>体育</td>
<td>英语</td>
</tr>
</table>
</body>
</html>

原文地址:https://www.cnblogs.com/hankai2735/p/11024172.html