HTML基础学习（二）列表、表格

已于 2022-05-14 14:36:38 修改
阅读量266 收藏
点赞数 1
分类专栏： HTML 文章标签： html 前端
于 2022-05-12 19:16:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62911585/article/details/124737390
版权

 

目录列表和菜单列表已经被淘汰，不经常使用。

有序列表：

<!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>
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
</body>
</html>

 

 

 无序列表：

 

 

 定义列表：

 表格：

表格标题：

表格表头： 

<thead></thead>标签：表头。

<tbody></tbody>标签：表身。

<tfoot></tfoot>标签：表脚。

为什么要加thead、tbody、tfoot标签：

1、使代码更具有语义化

2、更好结合CSS来控制样式

表格中合并行：

 

表格中合并列：

课程表表格示例：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>课程表</title>
</head>

<body>
<table border="2"height="50%"width="100%"cellspacing="1"bgcolor="#00FFCC">
<thead>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<tbody>
<tr>
<td align="center">8:00<br/>1</td>
<td rowspan="2"align="center">网络应用程序设计（1-16周全部）</td>
<td rowspan="2"align="center">信息安全（2-17周全部）</td>
<td>&nbsp;</td>
<td rowspan="2"align="center">网络应用程序设计（1-16周单周）</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center">8:55<br/>2</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center">9:55<br/>3</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="2"align="center">计算机图形学（1-9周全部）</td>
<td rowspan="2"align="center">计算机组成原理（1-14周全部）</td>
<td rowspan="2"align="center">计算机组成原理（1-14周全部）</td>
</tr>
<tr>
<td align="center">10:50<br/>4</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center">13:50<br/>5</td>
<td rowspan="2"align="center">计算机图形学（1-9周全部）</td>
<td rowspan="2"align="center">计算机专业英语（1-16周全部）</td>
<td rowspan="2"align="center">算法分析与设计（1-10周全部）</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center">14:45<br/>6</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center">15:40<br/>7</td>
<td rowspan="2"align="center">算法分析与设计（1-10周全部）</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center"> <br/>8</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

效果图：

白、49
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML列表，表格，表单（简洁版）
m0_74854911的博客
03-31 935
你来自哪来自旋风星系的电子羊
HTML--(ul+li)元素个性化设计表格实例
苛性钠的博客
11-19 2558
为什么不使用table做布局 1.Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源)。 2.Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间)。 3.Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数)。 4.在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦)。 5.Table会影响其内部的某些布局属性的生效(比如<单元格里的元素的heigh
沉浸式学习html列表与表格
qq_63189081的博客
04-27 63
HTML < ul > 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
html 中写目录列表,HTML的目录列表和菜单列表有什么区别？
weixin_33078391的博客
06-05 2330
1.目录列表标记目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因为它的功能也可以通过无序列表来实现。语法：列表项列表项列表项······说明：在该语法中，和标志着目录列表的开始和结束。举例：目录列表列表无序列表有序列表目录列表在代码中<1:1>无序列表<1土>有序列表<1:1>目录列表部分的标记为设置目录列表，在浏览器中预览，可...
html 中写目录列表,制作的HTML目录列表
weixin_33735910的博客
06-05 3209
我有我的网站上，以供使用者进入的文章链接制作的HTML目录列表到目前为止...当一个链接提交，我能够获得该链接张贴到目的地的HTML页。但是...如果提交了另一个链接，它将删除第一个链接。我想链接到'堆栈'，并建立目标(目录)页面(目前是一个HTML页面)的列表。我不知道如何做到这一点。任何建议或例子将不胜感激。我有包括所有三个页面的一个非常精简版....1)本表FORMbody{margin-t...
HTML基础的学习（2）表格与表单
qq_42939519的博客
12-01 98
一.表格 1）语法： <table border="1" width="" cellspacing="" cellpadding="" align="center/right" height=""> <caption></caption> 表格的标题 <tr> 行 <th></th> 列标题 </t...
HTML中table表格标签的基础学习教程
09-28
用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
网页设计HTML表格基础与布局优秀PPT.ppt
12-03
通过学习HTML表格基础与布局，开发者可以更好地掌握网页设计的技术和技巧。 一、HTML表格基础 HTML表格是网页设计中最基本的结构元素之一。HTML表格由、、三个基本标签组成。其中，标签定义了表格的开始和结束，...
HTML基础学习基础认知，适合小白玩
05-12
表格与列表 表格标题和标题单元格 合并单元格 有序和无序列表 制作滚动效果 滚动图片 层 表单 表单元素 textarea标签 select及option标签 button标签 label标签的应用 fieldset及legend标签 表单属性...
漂亮的表格css+html
04-20
通过学习和实践这些示例，开发者可以掌握创建高效、优雅的HTML表格和CSS样式的技巧，提升网页设计的水平。 记住，优秀的表格设计不仅关注外观，也要考虑用户体验。清晰的布局、易读的字体、合理的色彩搭配以及对...
HTML3种列表
king220022的博客
02-24 814
标记和有序列表项
HTML 表格
木晓的博客
12-16 152
你可以使用 HTML 创建表格。 表格 表格由 <table> 标签来定义。每个表格均有若干行 （由 <tr> 标签定义） ，每行被分割为若干单元格 （由 <td> 标签定义 ）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <table border="1"...
html的列表.表格.表单
fymsa的博客
05-06 207
## 列表: #### 1.无序列表: 2.特点:①自带小黑点,②li标签独占一行,③他是没有顺序的列表,可以随意切换顺序; 3.注意点:ul里面只能放li标签,但是li标签里可以包含其他内容. ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e2fae8729224c1eafad7db7ed0cdaa5~tplv-k3u1fbpfcp-watermark.image?) #### 2.有序列表: 1.ol有顺序的列表,
HTML 列表 || 表格 || 表单
最新发布
qq_67140973的博客
03-14 1154
一个标题对应多个內容的区域标签作用dl代表定义列表dt列表标题dd列表描述< dl > < dt > 列表标题 < dd > 列表描述 ... < dl > < dt > 列表标题 < dd > 列表描述 ... < dt > 列表标题 < dd > 列表描述 ...
HTML列表使用(通俗易懂)
sjs52406的博客
12-08 1906
本篇文章主要在于让大家所认识并了解HTML中的所有列表标签及使用
HTML【表格+列表】
随便写写
07-06 858
​ HTML 表格 表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 Title ......
HTML列表与表格详解_高效学习攻略
7旅病娘的博客
12-10 926
HTML列表与表格详解，高效学习攻略
列表与表格
logical_thinking的博客
07-28 236
随着我们的学习我们开始学列表与表格，在我们使用电脑的时候打开浏览器例如百度首页我们会看到下面的这就是用到了列表以上就是今天要讲的内容，本文仅仅简单介绍了列表与表格，而列表与表格在我们编写代码时能够减少我们一定的时间、并且在以后的编码中我们会经常用到。https。...
HTML学习：合并单元格与表格基础
在提供的例子中，`<TH COLSPAN = 3>` 表示该表头单元格将跨3列，这样就可以在表格中创建出合并的单元格，如"第一学期"和"第二学期"。 HTML（HyperText Markup Language）是用于构建和维护网页的标准标记语言。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值