HTML(七) 表格

最新推荐文章于 2025-03-09 20:08:49 发布

原创最新推荐文章于 2025-03-09 20:08:49 发布 · 388 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

9 篇文章

订阅专栏

表格的基本结构

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的基本结构</title>
</head>
<body>
<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

表格基本结构

合并单元格

colspan 和 rowspan

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用colspan 左右合并单元格  rowspan属性上下合并单元格</title>
</head>
<body>
<table border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td colspan="2">1-1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td rowspan="2">3-2-2</td>
        <td>2-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

合并行列

用align 属性设置对齐方式

设置该行居中显示

<tr align="center">
        <td colspan="2">1-1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>

bgcolor 属性设置表格背景色和边框色

表格背景色为红色

<table border="1" width="400" bgcolor="red">

该边框为绿色

<td rowspan="2" align="center" bgcolor="green">3-2-2</td>

用cellpadding 属性和cellspacing 属性设定边距

cellpadding 属性设定表格单元格中的内容距离格线的距离，即表格中单元格和内容之间的距离
cellspacing 属性设定表格相邻单元格边线之间的距离，即表格中单元格和单元格之间的距离

<table border="1" width="400" bgcolor="red" cellpadding="20px;" cellspacing="20px;">