前端入门|HTML基础元素3，表格

表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。

行、列、单元格单元格特点：同行等高、同列等宽。

表格的基本语法：

创建一个3行3列的表格：

单元格中内容的填充间距通过cellpadding(默认1px)属性来设置；

单元格与单元格之间的间距通过cellspacing(默认1px)属性来设置。

设置单元格的填充间距为10，单元格之间的间距为0，红色边框

一般表格的第一行是标题，并且是文本居中、加粗，将td换成th。

而某些数据需要居中，但不希望加粗，可以给td添加align="center"

表格的跨行跨列

有时，表格的结构并没有那么简单，可能会存在跨行和跨列的情况：

跨行：

跨列：

跨行、跨列并存：

这个问题看似很复杂，其实很简单，在制作跨行和跨列的表格时，只需按照如下步骤就可以轻松搞定！：

首先做一个完整的表格：注意虚线部分，最终去掉这些虚线就是我们要的效果

找出最左上角那个“侵占”其他单元格的单元格，如下图标注数字的位置

观察这个单元格“侵占”的是行还是列，算上自己总共是几个？(行数用r表示，列数用c表示)：

如果是行：在这个单元格上添加rowspan="r"

如果是列：在这个单元格上添加colspan="c"

如果既有行又有列：在这个单元格上添加rowspan="r" colspan="c"

把“被侵占”的单元格删掉，删除顺序：从右向左，从上至下，否则很容易出错！

按以上步骤完成一个跨行跨列的表格：

每天持续更新，点点关注不迷路哦~

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析

即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

【深解】

作为一个前端开发人员，你要是没有听说过 CSS，那你肯定是一个 “out-man” 。随着 CSS 的深入人心，结构、表现与行为的逐渐分离，HTML 语义化成了炙手可热的卖点。

语义化的 HTML 首先要强调 HTML 结构一个网页就好像一幢房子，HTML 结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。CSS 是装饰材料，是油漆，是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了，没有了实际使用价值。CSS 完全依靠引用它的 (X)HTML 文档。如果你想使 CSS 的能力发挥到极致，提供一个既干净又有结构的 HTML 是非常必要的。

其实HTML 中的标签都有他自身的含义，只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着 CSS 的重现江湖，表格也终于回到他的本质工作——列表数据。它会告诉我们说：“这行是一个标题这几行组成了一个段落这些文字是项目列表……”在做前端开发的时候要记住：HTML 告诉我们一块内容是什么(或其意义)，而不是它长的什么样子。

<br>：换行标记，让后面的信息显示在下一行

<p>：段落标记

<center>：居中标记，让段落或者文字相对于父标记居中显示

<pre>：预格式化标记

<li>：列表项目标记，每一个列表使用一个<li>标记

<ul>：无序列表标记

<ol>：有序列表标记

<hr>：水平分割线标记

<div>：分区显示标记，也称为层标记

<!--->：注释标记，定义注释。

以上就是HTML常用的格式标记。望采纳！

---