html基础-表格篇

1. 基础表格

<!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>表格</title>
</head>
<body><h3><center>前端技术划分标准 </center></h3><!-- cellspacing表示单元格间隙 align表示对齐方式border表示--><table border="1" cellspacing="0"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><tr align="center"><td></td><td>初级</td><td>中级</td><td>高级</td><td>专家</td></tr><tr align="center"><td>标准</td><td>被产品怼的说不出话</td><td>跟产品怼的不相上下</td><td>怼的产品没话说</td><td>直接将其怼辞职</td></tr><tr align="center"><td>用户A</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户B</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户C</td><td></td><td></td><td></td><td></td></tr></table>
</body>
</html>

实现效果：

解释：

<table></table>标签: 用于定义一个html表格，包括一个或多个 <tr>、<th> 以及 <td> 元素。其属性cellspacing 表示单元格间隙，align 规定表格相对周围元素的对齐方式，border 规定表格单元是否拥有边框，但是在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。
<tr></tr>标签：用于定义 HTML 表格中的行，一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。其属性align 定义表格行的内容对齐方式。
<td></td>标签：用于定义 HTML 表格中的标准单元格。
<th></th>标签：用于定义 HTML 表格中的表头单元格。可视为文本内容通常呈现为粗体并且居中的<td> 标签。
<col>标签：没有结束标签，用于定义表格内的每一列的列属性。通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
<colgroup></colgroup>标签：用于对表格中的列进行组合，以便对其进行格式化。比如个人简历的代码可以进行替换（span属性：规定列组应该横跨的列数）：

2. 个人简历制作

<!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></title>
</head><body><!-- colspan规定单元格可横跨的列数。    rowspan设置单元格可纵跨的行数。作为td标签的属性 th标签=加粗并水平居中的td标签--><table border="1px" cellspacing="0"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="200px"><tr align="center" height="60px"><th colspan="7">个人简历</th></tr><tr align="center" height="60px"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr align="center" height="60px"><td>学历</td><td></td><td>籍贯</td><td  colspan="3"></td></tr><tr align="center" height="60px"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr align="center" height="60px"><td>毕业院校</td><td colspan="5"></td></tr><tr align="center" height="60px"><td>求职意向</td><td  colspan="6"></td></tr></table>
</body></html>

实现效果：
说明：

在上述的基础表格上用到了某个单元格横跨几行几列的属性。单元格标签<td></td>或者<th></th>的属性colspan：规定单元格可横跨的列数，rowspan：设置单元格可纵跨的行数。

额外补充：
按照W3C的标准写法，table严格要写成以下形式：

<tbody></tbody>是最重要的，我们在上面写的tr，td标签其实都在<tbody></tbody>里面，只是在渲染的时候浏览器会自动帮我们生成这个标签，以后写主体内容的时候，建议先将<tbody></tbody>标签加上，再将表格的主体内容填写进去。

html基础-表格篇相关推荐

从零开始的 React 组件开发之路 (一)：表格篇
React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇,表格篇.本系列的特色是从需求分析.API 设计和代码设计三个递进的过程中,由简到繁地开发一个 ...
MySQL数据库基础表格——增删改查（下）
♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维课堂笔记,努力不一定有收获,但一定会有收获加油!一起努力,共赴美好人生! ♥️树高千尺,落叶归根人生不易,人间真情目录 MyS ...
mysql（基础案例篇）
mysql(基础案例篇) 1.CRUD1 (创建Create.检索Retrieve.更改Update.删除Delete) 查:select * from 表名 where 条件删:delect fr ...
3、Latex学习笔记之表格篇
目录表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...
1、Latex学习笔记之基础入门篇
目录一.Latex基础 1.架构 2.引用.脚注 3.单栏.双栏 4.常用快捷键 5.宏包 6.空格 7.换行.行间距 8.换段 9.下划线 10.引号 11.注释 12.字体 13.缩进 14.超 ...
View 5.1 重装上阵（4—基础架构篇）
从底层架构方面来看,VIEW 5.1最大的改进在于引入了Content-Based Read Cache(CBRC) 技术,大大降低了部署桌面虚拟化所带来的IOPS风暴,同时大大降低了对于存储的压力和 ...
《Ansible权威指南》一第一篇 Part 1 基础入门篇
本节书摘来自华章出版社<Ansible权威指南 >一书中的第1章,第1.1节,李松涛魏巍甘捷著更多章节内容可以访问云栖社区"华章计算机"公众号查看. 第一篇 ...
微指令地址的形成方式_交换那些事儿 | 基础维护篇 IPv6地址分类及配置方法
IPv6地址分类及配置方法 H3C交换机基础维护篇何为IPv6 随着网络的不断扩大和发展,IPv4的地址空间已不能满足需求,因此IPv6协议的应用越来越广泛.那么IPv6地址是如何规范和配置的呢,今 ...
一文读懂物联网 MQTT 协议之基础特性篇
一.前言上个月有个读者问我物联网 MQTT 协议实战相关的问题,我说后面会搞,没想到不知不觉一个月了,太忙了,再怎么忙答应的事情还是要给读者一个交代,所以就有了此文. 二.MQTT 协议概要 2.1 ...

html基础-表格篇

1. 基础表格

2. 个人简历制作

html基础-表格篇相关推荐

最新文章

热门文章