table表格

最新推荐文章于 2024-10-02 17:15:49 发布

弓长九日。。

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量144

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/weixin_51746436/article/details/117293054

版权

table表格

HTML中的表格用table元素,tr元素，td元素。

tr元素定义表格行 td元素定义表格列。

!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table表单</title>
</head>
<body>
	<table border="1">   
	<tr >
	<td>&nbsp&nbsp</td>  &nbsp为页面中的空格
	<td>&nbsp&nbsp</td>
	</tr>
	<tr>
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	<tr>
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	</table>
</body>
</html>

该代码运行结果如下

表单中的属性

bother用来设置边框，在 HTML5 中，仅支持 "border" 属性，并且只允许使用值 "1" 或 ""。

height用来设置高，单位为px。

width用来设置宽，单位为px。

align设置对齐方式，取值为left right center。

bgcolor设置背景颜色。

cellpadding设置表格边距。

cellspacing 设置表格的间距。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table表单</title>
</head>
<body>
	<table border="1" align="center" cellpadding="0" cellspacing="0" height="300px" width="300px" bgcolor ="#CDCDCD">  #CDCDCD为灰色
	<tr >
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	<tr>
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	<tr>
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	</table>
</body>
</html>

代码结果如下

如果行和列都设置了不同的高度或宽度时，显示大的高度或宽度。

rowspan设置用来指定单元格纵向跨越的行数，rowspan就是用来合并行的。

colspan设置用来指定单元格横向跨越的列数，colspan就是合并列的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table表单</title>
</head>
<body>
	<table border="1" align="center" cellpadding="0" cellspacing="0" height="300px" width="300px" bgcolor ="#CDCDCD">
	<tr >
	<td colspan="2">&nbsp&nbsp</td>
	</tr>
	<tr>
	<td rowspan="2">&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	<tr>
	<td>&nbsp&nbsp</td>
	</tr>
	</table>
</body>
</html>

代码结果如下

表单的镶嵌

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table表单</title>
</head>
<body>
	<table border="1" align="center" cellpadding="0" cellspacing="0" height="300px" width="300px" bgcolor ="#CDCDCD">
	<tr >
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	<tr>
	<td >
	<table width="150px" border="1" height="100px">
	<tr>
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</r>
	</table></td>
	<td>&nbsp&nbsp</td>
	</tr>
	<tr>
	<td>&nbsp&nbsp</td>
	<td>&nbsp&nbsp</td>
	</tr>
	</table>
</body>
</html>

代码运行如下