HTML学习笔记4（表格）

最新推荐文章于 2024-08-05 22:35:13 发布
最新推荐文章于 2024-08-05 22:35:13 发布
阅读量72 收藏 1
点赞数
分类专栏： 菜鸟网站之路 文章标签： html 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YanMCui/article/details/131009184
版权

<!--

    1.表格

        1.1 作用：给用户展示数据

        1.2 结构

        <table>

            <caption>表格标题</caption>

            <thead>

                <tr>

                    <th>表格头部，内容默认水平居中且加粗</th>

                    <th>表格头部，内容默认水平居中且加粗</th>

                    <th>表格头部，内容默认水平居中且加粗</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>表格数据</td>

                    <td>表格数据</td>

                    <td>表格数据</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td></td>

                </tr>

            </tfoot>

        </table>

        1.3 表格参数说明

        <table border="边距" width="宽度" height="高度" bgcolor="背景颜色" background="背景图片" cellpadding="内容到边框的距离" cellspacing="单元格之间的距离">

</table>

-->



 

<!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>Document</title>

</head>

<body>

    <!-- 创建3*4的表格快捷键:table>tr*3>td*4 -->

    <table border="1" cellspacing="0" width="500" align="center">

        <caption>表格标题</caption>

        <thead>

            <tr align="center">

                <th>表格头部</th>

                <th>表格头部</th>

                <th>表格头部</th>

            </tr>

        </thead>

        <tbody>

            <tr align="center">

                <td>表格数据</td>

                <td>表格数据</td>

                <td>表格数据</td>

            </tr>

        </tbody>

        <tfoot>

            <tr align="center">

                <td>表格数据</td>

                <td>表格数据</td>

                <td>表格数据</td>

            </tr>

        </tfoot>

    </table>

    <!-- 合并单元格: rawspan垂直方向合并 -->

    <table border="1" align="center" width="600" heigth="600">

        <tr>

            <!-- colspan水平方向合并 水平合并之后要删除多余的单元格 -->

            <td colspan="2">表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

        </tr>

        <tr>

            <td colspan="3">表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

        </tr>

        <tr>

            <!-- rawspan垂直方向合并 垂直合并之后要删除多余的单元格 -->

            <td rowspan="3">表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

        </tr>

        <tr>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

        </tr>

        <tr>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

        </tr>

        <tr>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

            <td>表格数据</td>

        </tr>

    </table>

</body>

</html>

猫漆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html创建一个四行三列表单,HTML（三）表格table与表单form的基本使用
weixin_39763953的博客
06-26 2976
table的基本使用表格的作用除了可以显示一个表格外，有的时候还可以用于辅助排版。以前的网页都是使用表格进行排版的，不过现在都不流行了，因为表格排版不利于网页结构。1、新建表格table就是表格tr是表格的行，td表格的每一个。thread定义表头表格示例：&lt友，记基开前不接些前家我告对猿果水使钮控;table border="1" width="40朋支不器几事为的时后级功发发来久都...
HTML标签四
weixin_48494427的博客
02-25 153
表格的基本结构
HTML快速入门4——表格入门
雨中怡然
03-24 2179
　　上课思考题，大家想过吗？答案是否定的。因为有对齐方式的是block类， block类将另起一段，所以几个不同对齐方式的block不可能在同一行里    于是我们再介绍一个排版十分重要标签——表格例子： 1行1列1行2列 2行1列2行2列 浏览器显示：
html表格与表单
weixin_74534351的博客
04-02 117
除此之外thead (表头），tbody（表体），tfoot（表尾），可以替代tr，th可以替代td使用，但是。放到请求头中，put：用于修改数据，不会在地址栏中显示，通常来说更加安全，提交数据在浏览器的地址栏中显示，数据大小不能超过4k，用于删除数据，和put一样都是restful风格的。禁用元素，不能输入与点击，与readonly类似。其值有4中，分别为，唯一的编号，用于锚点定位之类的操作。唯一的编号，用于锚点定位之类的操作。使用于td中，向右合并单元格。只读，不可输入，无需设置值。
html创建一个四行三列表单,3-1. HTML表单的用法
weixin_28862113的博客
06-26 731
Form表单的作用HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。故其作用为数据采集。表单必须要用form标签包围...单行输入文本框placeholder可在输入框中显示提示信息，一旦输入数据，提示信息便会自动消失。 账号 密码输入type="password"使得输入密码时显示为小圆点，有效保护信息安全。 密码 单选注意，相同的n...
HTML学习笔记——05：表格
qq_31532983的博客
01-15 1109
HTML-表格
HTML学习笔记pdf版
07-19
### HTML学习笔记知识点详解 #### 一、HTML概述 **HTML**（HyperText Markup Language，超文本标记语言）是一种标准的编程语言，主要用于创建和结构化网页内容。它定义了网页上的各种元素及其布局方式，例如文本、...
学习HTML5过程笔记
03-19
本笔记涵盖了HTML5的基础知识点，包括HTML的基本概念、标签的使用、浏览器的渲染引擎、Web标准、HTML标签的构成、页面结构、列表标签、表格标签、表单标签、选择器、样式、布局案例等，为学习HTML5提供了系统的知识...
html基础知识学习笔记分享
04-09
4. **视口标签**： `, initial-scale=1">`帮助适应手机端查看，确保页面宽度与设备屏幕宽度一致。 5. **标题标签**： `<title>` 设置网页在浏览器标签页显示的标题。 `<h1>` 至 `<h6>` 用于设置不同级别的标题，...
个人做的HTML5学习笔记
12-13
### HTML5学习笔记知识点梳理 #### 一、HTML5简介及特点 - **定义**: HTML5是HTML（HyperText Markup Language）的最新版本，由万维网联盟（W3C）于2014年10月正式发布。它不仅继承了HTML的基本特性，还新增了许多...
【前端学习笔记day13】2.9. html表格
01-08
html表格html表格 2.9. html表格 html表格 1、 标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing...
【表格样式】——HTML制作表格大全
热门推荐
Hello World
08-13 11万+
标签的属性设置 带边框的表格： FoodDrinkSweet ABC Food Drink Sweet A B C 不带边框的表格： FoodDrinkSweet ABC Food Drink Sweet A B C
三行四列布局html,CSS布局实例:上中下三行,中间自适应
weixin_30529683的博客
06-10 1102
上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。最外层#box { display:table; }，高...
3行3列表格 table实现，div+css实现
weixin_34247155的博客
03-21 1960
table实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l...
前端HTML总结
最新发布
m0_54066656的博客
08-05 908
前端笔记，HTML标签详解。
HTML-09.表单项标签
程小白的博客
08-05 358
【代码】HTML-09.表单项标签。
前端面试宝典【HTML篇】【5】
BDawn的专栏
08-05 99
form标签用于定义 HTML 表单，它用于收集用户输入的数据。而input 标签则是表单中最常用的元素之一，用于创建各种类型的输入控件。 template 标签是 HTML5 中引入的一个新元素，用于定义文档中的不可见模板。这些模板可以被脚本动态地克隆并插入到文档的可见部分中，从而实现动态内容的快速构建。
JavaWeb基础1：HTML/CSS/JS/HTTP
m0_53842576的博客
08-05 463
JavaWeb基础1：HTML/CSS/JS/HTTP (qq.com)
4个自定义倒计时
lulei5153的博客
08-03 342
【代码】4个自定义倒计时。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值