当前位置：首页 > news >正文

HTML（七）表格

news 2025/7/12 9:35:30

在HTML中，表格的标准形式如下：

<table></table>

使用上面的语言，就已经生成了一个表格，只不过这个表格什么都没有

那么，该如何让表格存在东西呢？

首先，我们需要使用到<tr> </tr> ，如下

<table><tr></tr>
</table>
这里的<tr> </tr> 就在表格中运用一行

但是在表格中，一行我们也可以有很多列

这时候我们就需要用到<td></td> 或者<th> </th>

如下->:

<table><tr><td></td></tr><tr><th></th></tr>
</table>
每一对 td或者th 代表了一列

使用效果如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table  width="400px" height="500px"  bgcolor="pink">这里是设置表格宽度为400，高度为500，单位是px<tr><th>文具</th><th>橡皮</th></tr><tr><td>文具</td><td>橡皮</td></tr></table>
</body>
</html>

在上图中，我们需要了解到

(注：上图大小不对，但你们自己可以重新试试，代码是对的)

<td>表示一般单元格默认居左，并以普通格式显示

<th>表示标题单元格默认居中，并以加粗格式显示

但是这样还不够直观，所以我们需要运用到边框线，边框线需要在table位置更改

使用如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table border="3px" bordercolor="red" width="400px" height="500px"  bgcolor="pink"><tr><th>文具</th><th>橡皮</th></tr><tr><td>文具</td><td>橡皮</td></tr></table>
</body>
</html>

这里的border就是边缘线 bordercolor可以改变边缘线的颜色

使用效果如图：

我们也可以让每一行表格都更改一下位置和表格大小

如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table border="3px" bordercolor="red" width="400px" height="500px"  bgcolor="pink" align="center" ><tr height="50px"><th>文具</th><th>橡皮</th></tr><tr align="center"><td>文具</td><td>橡皮</td></tr></table>
</body>
</html>

我们也可以更改表格内容的颜色，只需要在想更改的位置加上bgcolor即可

在表格中还有最后两种东西，一种为跨行--rowspan

另一种为跨列--colspan

说是跨，其实就是把一格的东西扩大成为N格

最后，我们写两个语言来整体实现

例子1：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table width="300px" height="500px" align="center" bgcolor="pink"  border="3px" bordercolor="green" ><tr height="100px"><th>文具</th>   <th>个数</th>   <th>价格</th></tr><tr align="center"><td bgcolor="green">铅笔</td><td>5</td><td>88</td></tr><tr align="center"><td>橡皮</td><td >6</td><td>99</td></tr><tr><th>总价格</th><td colspan="2" align="center">11</td></tr></table>
</body>
</html>

效果图：

例题2：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table width="300px" height="500px" align="center" bgcolor="pink"  border="3px" bordercolor="green" ><tr height="100px"><th>文具</th>   <th>个数</th>   <th>价格</th><th>总价格</th></tr><tr align="center"><td bgcolor="green">铅笔</td><td>5</td><td>88</td><td rowspan="2">11</td></tr><tr align="center"><td>橡皮</td><td >6</td><td>99</td></tr></table>
</body>
</html>

效果图：