表格简介

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

表格在日常生活在使用的非常广泛，比如Excel就是专门用来创建表格的工具。

表格是指按所需的内容项目画成格子，分别填写文字或数字的书面材料，便于统计查看，例如：课程表、花名册、银行对账单等。

在网页中也可以创建表格。

  • 使用<table></table>标签来创建表格
    • 使用<tr></tr>标签来创建table中的一行
      • 使用<td></td>标签来创建tr中的一个单元格

例如下面这个四行四列的表格：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>

<body>
    <!-- 创建一个表格 -->
    <table width="40%" border="1" align="center">
        <!-- 创建第一行 -->
        <tr>
            <td>A1</td> <!-- 创建第一个单元格 -->
            <td>A2</td> <!-- 创建第二个单元格 -->
            <td>A3</td> <!-- 创建第三个单元格 -->
            <td>A4</td> <!-- 创建第四个单元格 -->
        </tr>
        <!-- 创建第二行 -->
        <tr>
            <td>B1</td> <!-- 创建第一个单元格 -->
            <td>B2</td> <!-- 创建第二个单元格 -->
            <td>B3</td> <!-- 创建第三个单元格 -->
            <td>B4</td> <!-- 创建第四个单元格 -->
        </tr>
        <!-- 创建第三行 -->
        <tr>
            <td>C1</td> <!-- 创建第一个单元格 -->
            <td>C2</td> <!-- 创建第二个单元格 -->
            <td>C3</td> <!-- 创建第三个单元格 -->
            <td>C4</td> <!-- 创建第四个单元格 -->
        </tr>
        <!-- 创建第四行 -->
        <tr>
            <td>D1</td> <!-- 创建第一个单元格 -->
            <td>D2</td> <!-- 创建第二个单元格 -->
            <td>D3</td> <!-- 创建第三个单元格 -->
            <td>D4</td> <!-- 创建第四个单元格 -->
        </tr>
    </table>
</body>

</html>

效果 <<戳它！！！

  • clospan用来横向合并单元格（合并列）
  • rowspan用来纵向合并单元格（合并行）

例如分别合并单元格D3和D4、B4和C4,只需要作如下操作：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>

<body>
    <!-- 创建一个表格 -->
    <table width="40%" border="1" align="center">
        <tr>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <!-- 合并B4和C4单元格 -->
            <td rowspan="2">B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <!-- 合并D3和D4单元格 -->
            <td colspan="2">D3</td>
        </tr>
    </table>
</body>

</html>

效果 <<戳它！！！

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/HTML&CSS.basics/60.html