初学HTML用法大全指导(三)html中建立表格

本文主要是介绍初学HTML用法大全指导(三)html中建立表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上一篇博客我们讲了web页面中html脚本语言对图片的设置，这一篇博客我们来聊一聊html页面中经常见到的再普通不过的表格。这篇博客我会首先去聊一聊怎样在web页面用html标签创建表格，其次我会聊一聊对表格的行合并与列合并，然后再聊一聊在建立表格的标签中一些常见属性的使用。

1：在web页面中创建表格首先要用到<table>标签，去告诉浏览器等解析器这是一个table标签。<tr>标签显示行数；<td>标签显示列数。其中table标签中的属性border是设置整个表格的边框值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<Center>
<table border="1">
<tr><td>A-one</td><td>A-two</td><td>C-Three</td>
</tr>
<tr><td>B-one</td><td>B-two</td><td>B-Three</td>
</tr>
</table>
</Center>
</body>
</html>

2：用rowspan属性合并上下单元格；用colspan属性合并左右单元格。但是在合并时注意要把合并的行或者列去除掉。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并左右单元格、合并上下单元格</title>
</head>
<body>
<table border="1"><tr><td colspan="2">合并左右单元格</td><td>A-3</td></tr><tr><td rowspan="2">合并上下单元格</td><td>B-2</td><td>B-3</td></tr><tr><td>C-2</td><td>C-3</td></tr>
</table>
</body>
</html>

3：其他一些常用到的属性：比如align属性设置对其方式；bgcolor属性设置表格的背景颜色和边框的颜色；cellpadding与cellspacing属性设定边距。其中cellpadding属性设置表格单元格里面的内容距离格线的距离；cellspacing属性设定表格相邻单元格边线之间的距离；align属性设置对齐方式；height设置表格高；width设置表格的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格中常用属性的使用</title>
</head>
<body><table border="1" align="center" height="400" width="400" cellspacing="40px" cellpadding="50px;"><tr><th colspan="2" align="center" bgcolor="gray">A-1</th><th align="right" bgcolor="yellow">A-3</th></tr><tr bgcolor="gray"><td rowspan="2" bgcolor="red">BBB-1111</td><td colspan="2">BBB-2222</td></tr><tr><td colspan="2" align="left">C-2</td></tr></table>
</body>
</html>