前端学习——HTML初学__6 HTML常用标签（3）

继续进行标签学习：

一、表格标签

表格主要用于显示，展示数据，它可以让数据显示的非常规整，可读性非常好，特别是后台展示数据的时候，一个表格可以将繁杂的数据表现得更加有条理。

表格基本语法如下：

<table><tr><td>单元格内的文字</td>...</tr>...
</table>

<table></table>是用于定义表格的标签，一个table就是一个最大的表格。

<tr></tr>标签定义单元格中的行，必须嵌套在<table></table>中使用。

<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中。

举个简单例子：

<body><table><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>龙龙</td><td>男</td><td>22</td></tr><tr><td>茹茹</td><td>女</td><td>20</td></tr></table>
</body>

显示：

二、表头单元格标签

一般表头单元格位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分，语法规范如下：

<body><table><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>龙龙</td><td>男</td><td>22</td></tr><tr><td>茹茹</td><td>女</td><td>20</td></tr></table>
</body>

此时运行如下：

当然单元格内容也可以放图片，链接等等等等的哦！

三、表格属性

表格属性不常用！以后学习CSS时设置，这里了解一下就行啦。

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或""	规定表格是否拥有边框，默认为""，无边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格宽度

注意这些属性要写到表格标签table里面去，仅添加边框时，默认单元格之间是有空白的，如果不想要将cellspacing的值设为0即可，举个栗子：

<body><table align="center" border="1" cellpadding="20" cellspacing="0"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>李龙玺</td><td>男</td><td>22</td></tr><tr><td>茹茹</td><td>女</td><td>20</td></tr></table>
</body>

不再演示啦，很简单的。

四、表格结构标签

有的表格会很长，可以将表格分割成表格头部和表格主体两大部分。

<thead>标签表示表格头部区域

<tbody>标签表示表格主体区域

上述代码更改后可以这样子：

<body><table align="center" border="1" cellpadding="20" cellspacing="0"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>李龙玺</td><td>男</td><td>22</td></tr><tr><td>茹茹</td><td>女</td><td>20</td></tr></tbody></table>
</body>

五、合并单元格

特殊情况下可以把多个单元格合并为一个单元格，这里学一下最简单的合并单元格。

合并单元格方式：

1.跨行合并：rowspan="合并单元格的个数"，举个例子：第二行的第一个单元格与第三行的第一个单元格进行合并。

2.跨列合并：colspan="合并单元格的个数"，举个例子：第一行的第二个单元格与第一行的第三个单元格进行合并。

目标单元格：

合并单元格代码要写在目标单元格身上。如果是跨行，将最上侧作为目标单元格写合并代码；如果是跨列，将最左侧作为目标单元格写合并代码。

演示代码如下：

最初三行三列表格

<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="400"><tr><td></td><td></td><td></td></tr>    <tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
</body>

第一行的第二个单元格与第一行的第三个单元格进行合并，第二行的第一个单元格与第三行的第一个单元格进行合并。

<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="400"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>

合并后如下图：

是不是很简单呢！以上就是表格的学习。

前端学习——HTML初学__6 HTML常用标签（3）相关推荐

050.前端开发之HTML基础及常用标签
050.前端开发之HTML基础及常用标签文章目录一.前端开发介绍 (一)前端开发都有哪些内容 1.HTML是什么? 2.CSS 3.JavaScript 4.HTML.CSS和JavaScript ...
【学习笔记】Unity3d C# 常用标签[xxx]
[学习笔记]Unity3d C# 常用标签[xxx] 介绍类字段方法介绍在使用Unity3d引擎去开发的时候,不可避免的要使用到专属的开发语言C#,而Unity3d开发引擎给我们提拱了很多的 ...
前端 | （二）各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
前端基础第一天：HTML常用标签知识点
学习目标理解: 相对路径三种形式应用排版标签文本格式化标签图像标签链接相对路径,绝对路径的使用 1. HTML常用标签首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写 ...
前端学习（四）：body标签（二）
进击のpython 前端学习--body标签接着上一节,我们看一下还有没有什么网址果不其然,在看到新闻类的网址的时候我们发现还有许多的不一样的东西! 使用ul,添加新闻信息列表这个样子是什么做 ...
前端入门教程(四)head内常用标签与body内常用标签
一 head内常用标签 1.meta相关标签 #1.指定字符集 <meta charset="gbk">#2.页面描述 <meta name="Desc ...
前端学习——HTML初学__2 HTML标签
一.HTML语法规范 1.标签关键词总是在<>中,并且大多数成对出现,成为双标签.如:<html>开始标签</html>结束标签当然也有单独出现的标签,如< ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
web前端学习总结（概念和HTML标签）
文章目录前言一.基本概念二.HTML标签 1.内联元素 2. 块级元素 3.<div>和<span> 4.特殊符号 5.图像和多媒体 6.超链接 7.表格 8.表单总结 ...

前端学习——HTML初学__6 HTML常用标签（3）

前端学习——HTML初学__6 HTML常用标签（3）相关推荐

最新文章

热门文章