前端入门HTML基础元素3，表格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端入门HTML基础元素3，表格相关的知识，希望对你有一定的参考价值。
参考技术A 表格在数据展示方面非常简单，并且表现优秀，通过与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基础
HTML术语
HTML注释 <!--注释内容-->
用于描述代码功能，浏览器解析时会忽略注释内容。
HTML元素
HTML文档的重要组成部分，一个HTML由大量元素组成，HTML中的所有内容结构，都是靠元素组织到页面的。
元素的组成部分
一般元素
<a href = "/classroom/17" > 立即加入 </a>：元素 <a> 标记名 <a href = "/classroom/17"> 起始标记：表示元素开始 </a> 结束标记 ：表示元素结束 href = "/classroom/17" ：属性 href ：属性名 “/classroom/17”：属性值 立即加入：内容空元素
又叫自闭合元素，空元素只有开始标记，没有元素内容和结束标记。 举例： 图片 <ing src= "图片路径"> alt="编程入门基础班"> 注意： 视频和音频不是空元素。元素的层次结构
一个元素的内容可以包含其他元素，形成嵌套的层次结构。 注意：两个元素之间不能相互嵌套1.若A元素直接包含B元素则： A为B的父元素，B为A的子元素；
2.若两个元素有同一个元素：它们互为兄弟元素；
3.若A直接或间接包含B则： A是B的祖先元素，B是A的后代元素。HTML文档结构
文档声明 <!DOCTPYE html> html <html lang="zh-cmn-Hans">head body
meta title 其他元素
1.文档声明：既不是元素也不是注释，总出现在代码第一行，告诉浏览器解析模式；
2.html元素：又叫根标记、根元素，它是其他所有元素的祖先元素；相关属性：lang（语言） 该属性指定文档的文字使用何种自然语言书写的，可能会影响浏览器的语言阅读和翻译行为。3.head元素：又叫文档头，它是html的第一个子元素；
head元素的内容不会显示到页面上，可以包含其它一些元素用于描述页面的附加信息; meta（标识页面的其它元数据（页面相关的附加信息）这是一个空元素，作为head的第一个子元素）; title（标识文档标题，会显示在浏览器标题栏或标签页上）、keyword、description等，利于SEO（搜索引擎优化）4.body元素：又叫文档提，网页中所有可视内容都放置在内，定义文档的内容结构。
***绝对路径和相对路径
绝对路径：当网站部署到服务器后，网站中的所有资源都可以通过一个地址（访问），这种格式书写的路劲，叫做绝对路径。
书写格式：协议：//域名/目录 使用场景： 访问站外资源时，只能用绝对路劲 访问站内资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略协议和域名相对路径：是相对于当前资源的位置
书写格式：./路径
使用场景：只能用于访问站内资源
./表示当前资源所在目录，必须作为相对路径开始，可省略
../表示返回上一层目录。CSS引用
1.使用外部样式表
<link rel = "styleshet" href="main.css"> 是<head>子元素。 特点： 1.CSS代码在一个独立的文件中，html通过link元素引入。 2.使HTML代码更加纯净，有利于程序员和搜索引擎的阅读。是开发页面的常见做法。2.使用内部样式表
特点： 1.将CSS代码写到html文档的style元素中，style也是head子元素。 2.没有了样式表文件，在某些时候提升效率。 3.多个页面难以共享样式 ，不利于代码复用。 4.html和css代码混杂，不利于程序员和搜索引擎阅读。 5.在某些对效率要求苛刻或测试的场景下使用。3.使用内部样式表
特点： 1.CSS代码写在某个元素开始标记的style属性中，行内样式，不写选择器 2.在某些时候提升效率。 3.多个元素难以共享样式，不利于代码复用。 4.不利于搜索引擎和程序员阅读。 5.在测试的场景下使用。
CSS术语
CSS注释
书写格式：/*注释内容*/ 快捷键：ctrl+?CSS规则
css代码由一个一个规则组成，每个规则指定了哪些元素运用什么样式。 h1{color:red;text-align:center;} （规则） 选择器 声明块（样式）选择器
1.元素选择器
书写格式：标记名{声明块} 意义：html中所有与标记名匹配的元素都应用声明块的规则。2.类选择器 （多个类名 用空格隔开）
书写格式：.类名{声明块} 意义：所有class属性为指定类名的元素都应用声明块的规则。3.id选择器 （id具有唯一性）
书写格式：#id值{声明块} 意义：属性id为指定值的元素，将应用声明块的规则。
语义化结构元素
和div没有本质区别,只不过有语义。
- header：用于表示页面或某个区域头部；body的第一个子元素，一般有img这个子元素，可以在一个页面中出现多次。
- nav：导航栏；子元素或后代元素a。
- aside：用于表示跟周围主题相关的附加信息：侧边栏、广告、评论、相关文章。
- article：用于表示文章或其他可独立页面存在的内容。
- section：用于表示一个整体的一部分主题。
- main：主题，一个页面只能出现一次。
footer：用于表示页面或某个区域的脚注。
a标签
<a target="页面打开位置" href="目标"> 内容 </a>
以上是关于前端入门HTML基础元素3，表格的主要内容，如果未能解决你的问题，请参考以下文章