表格标签的学习

最新推荐文章于 2023-05-16 14:34:59 发布

一方1

最新推荐文章于 2023-05-16 14:34:59 发布

阅读量92

点赞数

文章标签：学习

本文链接：https://blog.youkuaiyun.com/m0_67737085/article/details/127111609

版权

1.分析表格

为什么使用表格？

a.表格简单通用且结构稳定。

表格基本结构

a.单元格，行，列，跨行，跨列。

2.表格标签（<table></table>）

table+tab便可输入表格标签代码。

然后表格里面还有行和列，行（tr+tab）：<tr></tr>，列（td+tab）：<td></td>。这里的列应放在行里面。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格标签table
行：tr
列：td
-->
<table>
    <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>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

我们看到这里的表格并不是我们常见的表格，没有表格的框线。在这里我们可以进行优化加入框线。在把<table >改为<table border="1px">利用border添加框线和宽度。优化后的结果为：

这样便生成了我们常见的表格。

3.表格的跨列与跨行

如何让表格跨列呢，这里指的便是把最上面一行合成为一行进而实现跨列。这里便要用到colspan跨列。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格标签table
行：tr
列：td
-->
<table border="1px">
    <tr>
<!--        colspan跨列-->
        <td colspan="4">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>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

这里我们看到上面四格虽然合成一格，但是后面的内容也随之往后推移了。这里便是需要我们把第一行后面三列删除。

表格跨行

同上述跨列原理相同，把某一列的行合并在一起。经过跨列测试，不要忘了把合并后的对应列的行删除。这里便需要用到rowspan进行跨行操作。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格标签table
行：tr
列：td
-->
<table border="1px">
    <tr>
<!--        colspan跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!-- rowspan跨行操作-->
<!--        把对应的3-4删除-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

如上便完成了跨行操作。