html表格的基础知识及源代码-尚硅谷

最新推荐文章于 2024-07-26 14:13:22 发布

小付学前端

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量2.5k

点赞数

分类专栏： HTML5详细基础笔记文章标签： html html5 前端 css

本文链接：https://blog.csdn.net/weixin_58264104/article/details/125773779

版权

本文介绍了HTML中的表格基础知识，包括表格的创建、长表格的结构、表格样式的设定，以及表单的使用和相关属性，如rowspan、colspan、thead、tbody、tfoot、form、input等，同时探讨了表单数据提交和样式控制的方法。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、表格
二、长表格
三、表格的样式
四、表单
五、表单补充

前言

提示：这里可以添加本文要记录的大概内容：

在现实生活中，我们经常需要使用表格来表示一些格式化数据：

课程表、人名单、成绩单.....

同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格

一、表格

在table中使用tr表示表格中的一行，有几个tr就有几行；

在tr中使用td表示一个单元格，有几个td就有几个单元格；

rowspan 纵向的合并单元格

colspan 横向的合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.表格</title>
</head>
<body>
    <!-- 
      在现实生活中，我们经常需要使用表格来表示一些格式化数据：
         课程表、人名单、成绩单.....

         同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格


     -->
    <table border="1" width='50%' align="center">
        <!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
        <tr>
            <!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <!--rowspan 纵向的合并单元格  -->
            <td rowspan="2">D2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            <!--colspan 横向的合并单元格 -->
            <td colspan="2">C4</td>
           
        </tr>
    </table>
</body>
</html>