HTML（七）表格

news2025/1/11 1:46: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>

效果图：