1.表格

table 用来定义表格的标签
tr 用来定义表格中的行，必须嵌套在<table></table> 标签中
td 用来定义表格中的单元格，必须嵌套在<tr></tr> 标签中
th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示
表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。

<body><table><tr>  <th>数字1</th>     <th>数字2</th>    <th>数字3</th>        </tr><tr>  <td>1</td>     <td>2</td>    <td>3</td>        </tr><tr>  <td>1</td>     <td>2</td>    <td>3</td>        </tr><tr>  <td>1</td>     <td>2</td>    <td>3</td>        </tr></table>
</body>

1.1 表格属性

表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的

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

<table align=center border="1" cellpadding="20" cellspacing="0" width="500">

1.2 表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

用 <thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
以上标签都是放在<table></table>标签中

<table align="center" border="1"cellpadding="10" cellspacing="0"><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七天</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody>
</table>

1.3 合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数"
合并的顺序按照先上后下、先左后右的顺序 ,合并完之后需要删除多余的单元格，即以优先的单元格为目标单元格（在目标单元格添加属性）。

<td colspan="2"></td>

Web前端入门（六）表格相关推荐

黑马pink老师Web前端入门笔记（二）
Web前端入门二.HTML标签 (一) 学习目标 (二)HTML语法规范 (三) HTML基本结构标签 (四) 开发工具 (五) HTML常用标签 1.语义标签: 2.标题标签(重要): 3.段落和 ...
web前端入门学习 html5（1）
web前端入门基础教程,最适合零基础前端小白的视频教程html5+css3 文章目录 html 浏览器内核 web标注语法规范 html基本结构标签 web常用开发工具 vscode基本使用文档类 ...
经验分享：Web前端入门要怎么开始学？
现在,几乎整个互联网行业都缺前端工程师,不仅是刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在. 据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下,Web前端开 ...
Web 前端入门(一)
Web 前端入门 1.前端技术栈 Html 内容 CSS 样式 Javascript 行为 HTTP协议要注意不同浏览器的区别 2.Html基础 1. !DOCTYPE标签告诉浏览器使用的规范一 ...
Web前端入门的学习路线总结
想要学习web前端,前期一定要做好学习路线,下面是小编整理的Web前端入门的学习路线总结,希望正在从事Web前端工作的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助. Web前端入门的学 ...
2020年Web 前端怎样入门？最新Web前端入门的学习路线
2022年最新Web前端入门的自学路线 > 新手入门前端,需要学习的基础内容有很多,如下. 一.HTML.CSS基础.JavaScript语法基础.学完基础后,可以仿照电商网站(例如京东.小米) ...
Jmeter Web 性能测试入门 (六)：Jmeter 解析 response 并传递 value
解析response中的内容,并把获取到的value传递到后续的request中,常用的方法就是在想要解析response的request上添加后置处理器本章介绍两种常用的组件 BeanShell ...
web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
web前端入门必知的10个技术
随着HTML5的发展和普及,了解HTML5将成为Web开发人员的必修课.如何把网页做得更美观,对用户更有吸引力,不仅是企业对前端开发人员要求,更是一个合格的web前端工程师的自我修行.今天小编就跟大家 ...
Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...

Web前端入门（六）表格

文章目录

1.表格

1.1 表格属性

1.2 表格结构标签

1.3 合并单元格

Web前端入门（六）表格相关推荐

最新文章

热门文章