第二课：html基础-2

最新推荐文章于 2024-03-18 18:50:29 发布
最新推荐文章于 2024-03-18 18:50:29 发布
阅读量78 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62395433/article/details/122988263
版权

一、html的标签

html线上资料：HTML 元素

1.1 表格

表格标签：table

table中的行标签 tr

table中的列标签 td

table标签的属性

  • width：表格的宽度，值可以是具体的值，也可以是百分比

  • height：表格的高度，值可以是具体的值，也可以是百分比

  • border：表格的边框先的粗细

  • bgcolor：表格的背景色

  • align：设置表格的对齐方式，center表示居中，left表示居左，right表示居右

  • rulles=yes：表示合并边框线

  • cellpadding：设置单元格的边框线和内容之间的距离

  • cellspacing：设置单元与相邻的单元格的距离

tr标签的属性

  • bgcolor：设置这行的背景色

  • height：设置这行的高度

  • align：设置水平居中，center表示居中，left表示居左，right表示居右

  • valign：设置垂直居中，middle表示居中，top表示上，bottom表示下

td标签的属性

  • bgcolor：设置这列的背景色

  • height：设置这高的高度

  • align：设置水平居中，center表示居中，left表示居左，right表示居右

  • valign：设置垂直居中，middle表示居中，top表示上，bottom表示下

  • rowspan：上下合并单元格

  • colspan：左右合并单元格

案例1：创建一个三行五列的表格，设置边框未黑色线，1像素大小，实线

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table border="1px solid red" width=500 height=100 cellspacing="0" rules="yes" align="center">
        <tr align="center">
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
            <td>1-5</td>
        </tr>
        <tr align="center">
            <td>2-1</td> 
            <td>2-2</td> 
            <td>2-3</td> 
            <td>2-4</td> 
            <td>2-5</td>
        </tr>
        <tr align="center">
            <td>3-1</td> 
            <td>3-2</td> 
            <td>3-3</td> 
            <td>3-4</td> 
            <td>3-5</td>
        </tr>
    </table>
</body>
</html>

案例2：课程表

分析：

  • 首先确定表格的行数和列数【14行8列】

  • 答案

  • <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>

        <table border="1px red solid" align="center" rules="yes" cellspacing="0" cellpadding="0" width="1000" height=300>
            <!-- 第一行: 表头 -->
            <tr height=40>
                <td colspan="8" align="center" bgcolor="silver"> 课 程 表</td>
            </tr>

            <!-- 第二行: 周几 -->
            <tr align="center" height=40>
                <td width="150"></td>
                <td>周一</td>
                <td>周二</td>
                <td>周三</td>
                <td>周四</td>
                <td>周五</td>
                <td>周六</td>
                <td>周日</td>
            </tr>

            <!-- 第三行 -->
            <tr  align="center" height=40>
                <td rowspan="4" align="center">上午</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>

            <!-- 第四行 -->
            <tr align="center" height=40>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>


            <!-- 第五行 -->
            <tr align="center" height=40>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>


            <!-- 第六行 -->
            <tr align="center" height=40>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>

            <!-- 第七行 -->
            <tr align="center" height=40>
                <td>午休</td>
                <td colspan="7">11：30 ~ 13：30</td>
            </tr>


            <!-- 第八行 -->
            <tr  align="center" height=40>
                <td rowspan="4" align="center">下午</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>

            <!-- 第九行 -->
            <tr align="center" height=40>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>


            <!-- 第十行 -->
            <tr align="center" height=40>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>


            <!-- 第十一行 -->
            <tr align="center" height=40>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
                <td>数学</td>
            </tr>

            <!-- 第十二行 -->
            <tr align="center" height=40>
                <td>晚餐</td>
                <td colspan="7">17：00 ~ 18：00</td>
            </tr>

            <!-- 第十三行 -->
            <tr  align="center" height=40>
                <td rowspan="2" align="center">晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
            </tr>

            <!-- 第十四行 -->
            <tr align="center" height=40>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
                <td>晚自习</td>
            </tr>

        </table>
    </body>
    </html>

m0_62395433
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习软件测试的第三天
W15032092800的博客
02-17 495
一、html的标签 html线上资料：HTML 元素 1.1 表格 表格标签：table table中的行标签 tr table中的列标签 td table标签的属性 width：表格的宽度，值可以是具体的值，也可以是百分比 height：表格的高度，值可以是具体的值，也可以是百分比 border：表格的边框先的粗细 bgcolor：表格的背景色 align：设置表格的对齐方式，center表示居中，left表示居左，right
HTML基础：表格（初学者必看）
2302_76420691的博客
02-06 1389
表格 「1. 表格」 现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。 「2. 创建表格」 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> table、tr、td，他们是创建表格的基本标签，缺一不可
html 简单表格制作（看了它足以应对大部分表格）
yunduan__的博客
11-14 1万+
首先制作一个表格我们要知道一张简单表格是由二部分组成分别是表头，表身。 下面就是一个简单的表格。 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。如下图 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> &lt...
HTML 表格 表单的制作
m0_60045654的博客
10-21 6609
表格是一种二维结构，横行纵列。表格由单元格组成。每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高。从服务器角度讲，收集用户的输入数据。从客户端角度来讲，向服务器提交数据的位置。本站搜索<input type="submit" name="button" id="button" value="搜索"></form>
怎么制作一个HTML表格
cabbageboiling的博客
05-23 9446
HTML - 学习怎么做一个表格 表格在前端里是比较基础的，百米高楼平地起，所以我们更要掌握表格。 我们先看一下效果，表格包括表格标题、表头、表格内容、表格尾部内容，我们从头到尾看一下这个表格是怎么做出来的。 一：表格标签 table主要有以下属性： table由tr和td标签实现单元格的内容实现 二：标题标签 caption caption标签默认让标题在表格上面居中，不过没有加粗变黑效果，所以我们需要用一个标题标签实现这个效果。 三：表头标签 thead thead标签也是默认让表头
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 8666
如何使用html制作一个简易的表格
angular-101-l2:角度101-第2课
05-19
在本课程"Angular 101-第2课"中，我们将深入探讨Angular这一强大的JavaScript框架，它被广泛用于构建动态、单页Web应用程序。Angular以其模块化、数据绑定和依赖注入等特性，极大地简化了前端开发流程。下面将详细...
goit-markup-hw-05:第9-10课
04-03
【HTML基础知识】 HTML，全称为超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。在“goit-markup-hw-05”这个项目中，我们可以期待学习到关于HTML的基本结构、元素以及如何组织网页...
第2-3课：模板引擎 Thymeleaf 基础使⽤1
08-03
2. 提供与Spring MVC的完美集成，快速实现表单绑定、属性编辑器和国际化等功能。 3. 自然模板技术使得模板保持有效XML文档结构，可用于工作原型，且在运行时替换静态值。 下面是一个简单的Thymeleaf、Velocity和...
第二课 html文档结构-011
08-03
在本节课程“第二课 HTML 文档结构-011”中，我们将深入理解 HTML（XHTML）的基本构造，以及一些常见的标签和属性。HTML 是 Hypertext Markup Language 的缩写，是用于创建网页的标准标记语言。 首先，了解 HTML 的...
第一课：SPSS概览－－数据分析实例
05-13
2. 数据的预分析： 数据预分析是数据分析的重要步骤，包括数据的简单描述（如均值、标准差）和图形展示（如直方图）。这些可以帮助理解数据分布，选择合适的统计分析方法。例如，通过绘制直方图可以直观地比较急性...
如何使用HTML做一个表格
2301_76390945的博客
09-13 1260
`元素来定义表头单元格的内容。在接下来的两个`<tr>`元素中，我们使用`<td>`元素来定义普通单元格的内容。在上面的示例中，我们使用`<table>`元素来创建一个表格。`<tr>`元素表示表格的行，`<th>`元素表示表头单元格，`<td>`元素表示普通单元格。<title>表格示例</title><th>姓名</th><th>年龄</th><th>性别张三</td><td>李四</td><td>男</td><td>女
HTML表格制作
热门推荐
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
HTML表格表单制作
weixin_41534129的博客
02-28 7343
1.数据表格的作用及组成 作用：显示数据，展示数据 组成： <table>用于定义表格的标签 <tr>行 <th>内容<th>表头单元格 <td>内容</td>单元格 <td>内容<td>单元格 .... <tr> </table> 1.<table&gt...
html制作表格
chalotte_kan的博客
07-18 3319
html简单制作表格
html表格制作
少油少盐不要辣
07-06 6970
利用table、tr、td等标签，来制作常见的表格。 <!--先写出表格的规格（多少*多少），再根据具体的表格样式，进行单元格的合并和删除--> <table border="1" cellspacing="0" style="text-align: center;width: 100%"> <tr> <td colspan="3"...
HTML中表格怎么制作
qq_51735681的博客
04-07 978
HTML中表格怎么制作： 首先来介绍一下HTML中的表格标签： 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据**（table data）**，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 接下来，我们举个例子来展示一下以上所介绍的标签的效果： <!DOCTYPE html> <html> <
HTML表格（HTML 表格的使用，收藏这一篇就够了）
最新发布
u013179804的博客
03-18 1万+
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。今天聊聊 table。HTML元素用于创建表格，它是一种将数据按行和列组织排列的结构，用于在网页中呈现复杂的数据集。HTML 表格具有以下 2 种主要用途：1、最常见的用途是以表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。2、表格可以用于创建网页表单，通过在表格单元格中放置表单控件（如文本框、复选框、下拉菜单等），用户可以方便地输入数据。
DreamWeaver教程：第五课-表单详解与应用
"第五课课程目标-DreamWeaver 教程" 在DreamWeaver教程的第五课中，主要聚焦于表单的使用。表单在网页设计中扮演着至关重要的角色，它允许用户与网页进行交互，收集用户输入的数据，如用户名、密码、联系信息等。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值