html简单的表格制作

Beginner x_u2023-12-06 8:16

看一个简单的样例

标题 1	标题 2	标题 3
文字	文字	文字
文字	文字	文字

html 复制代码

<table border="1">
    <tr>
        <th align="left">标题 1</th>   <!-- 左对齐 -->
        <th align="center">标题 2</th> <!-- 居中对其（默认）-->
        <th align="right">标题 3</th>  <!-- 右对齐-->
    </tr>
    <tr>
        <td rowspan="2">col 11</td>
        <td>col 12</td>
        <td>col 13</td>
    </tr>
    <tr>
        <td>col 22</td>
        <td>col 23</td>
    </tr>
</table>

首先,讲解结构

html 复制代码

HTML 表格的基本结构：

<table>...</table>：定义表格

<th>...</th>：定义表格的标题栏（文字加粗）
<tr>...</tr>：定义表格的行

<td>...</td>：定义表格的列

解析:

也就是说最外层是table,然后由若干个行tr组成,在若干个tr内有若干个列td组成.

标题由th封装

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性border来显示一个带有边框的表格.

合并单元格

合并单元格,合并的顺序我们按照先上后下先左后右的顺序 ,合并完之后需要删除多余的单元格。

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"