1. 基本格式：

<table style="border: 1px solid black;" border="1px"><thead><tr><th>列 1</th><th>列 2</th><th>列 3</th></tr></thead><tbody><tr><td>行 1，列 1</td><td>行 1，列 2</td><td>行 1，列 3</td></tr><tr><td>行 2，列 1</td><td>行 2，列 2</td><td>行 2，列 3</td></tr></tbody><tfoot><span style="text-align: center">自定义表格</span></tfoot>
</table>

结果展示：

表格常用属性：

属性名 属性值 描述

align left、center、right 表格的水平对齐方式，默认为left左对齐

valign top、middle、bottom 规定表格行中内容的垂直对齐方式。

border pixels 规定表格单元是否有边框，默认为” ”,表示没有边框

cellpadding pixels、% 单元格内文字与边框的距离

cellspacing pixels、% 补白，表格中单元格之间的距离，默认为2

width 像素值或百分比规定表格的宽度

height 像素值或百分比规定表格的高度

bgcolor rgb(x,x,x)、#xxxxxx、colorname 表格的背景颜色

属性名	属性值	描述
align	left、center、right	表格的水平对齐方式，默认为left左对齐
valign	top、middle、bottom	规定表格行中内容的垂直对齐方式。
border	pixels	规定表格单元是否有边框，默认为” ”,表示没有边框
cellpadding	pixels、%	单元格内文字与边框的距离
cellspacing	pixels、%	补白，表格中单元格之间的距离，默认为2
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	表格的背景颜色

2. 表格标签

2.1 <table>标签

用来定义一个表格。

2.2 <thead>标签

用来定义 表格头部。（头部通常包含一行或多行表格标题定义，以帮助描述表格的内容。）

2.3 <tbody>标签

用来定义 表格主题。（这是表格中包含数据的部分，每个单元格包含了一个数据项。）

2.4 <tr>标签

用来定义表格一行的内容。

2.5 <th>标签

用来定义表格首行的内容。

2.6 <td>标签（可以记作：单元格标签）

用来定义表格的每一个单元格的内容。

3. 表格的合并

示例演示：

<table border="1px"><tr><th>姓名</th><th>年龄</th><!--    当定义跨列合并数目为N时，本一行比下一行需要少写N对<th></th>标签--><th colspan="2">联系方式</th></tr><tr><td>张三</td><td>20</td><td>电话：</td><td>010-12345678</td></tr><tr>
<!--    当定义跨行合并数目为N时，下一行需要少写N对<td></td>标签--><td rowspan="2">李四</td><td rowspan="2">22</td><td>电话1：</td><td>010-66666666</td></tr><tr><td>电话2：</td><td>010-66666666</td></tr></table>

结果展示：

继续学习之路：

HTML（一） -- 基本标签

HTML（二） -- 表格设计

HTML（三） -- 表单设计

HTML（四） -- 多媒体设计

如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！

HTML（二） -- 表格设计相关推荐

如何让整个表格高度固定_Saas产品中，表格设计有哪些要点
编辑导语:无论是在学校还是公司,我们每个人应该都接触过表格.表格不仅可以迅速的收集信息,还是一种高效的信息展示方式.本文作者基于过去的创业经验,为我们分析总结了数据表格设计的一些关键点,希望看后能够对 ...
B端数据表格设计实战指南（建议收藏）
作者:nick (转载已取得作者授权) 1. 前言在企业级中后产品中,通常大量使用表格来展示结构化的数据.合理地设计表格能给用户带来高效的信息获取率,但如何言而有物地设计表格,相信是绝大数刚入行B端 ...
B端表格设计实战指南
作者:nick (转载已取得作者授权) 一.表格的介绍 1. 表格的定义表格(Table):又称为表,是用来收集.整理.组织.分析数据的二维矩阵:它既是一种可视化交流模式,又是一种组织整理数据的手段 ...
小厂B端产品啥都干——B端表格设计入门指南（上）
前言众所周知,表格是一种可以清晰.全面.高效地将数据展示出来的组件,作为B端产品,表格一定是产品设计工作中接触最多的组件,今天我就以一个小场景来说说B端表格的应该如何入门. 关于本系列文章,有几点需 ...
小厂B端产品啥都干——B端表格设计入门指南（中）
前言书接上回,上一篇B端表格指南向大家展示了一些常见的表格样式,在产品设计能力中,一个人的眼界往往决定了这个人的产品设计下限,所以我将常见表格样式的介绍放在了第一篇,那么第二篇将从底层思维上给大家提 ...
[ISUX译]iOS 9人机界面指南(二)：设计策略
[ISUX译]iOS 9人机界面指南(二):设计策略雪糕 2015.11.09 文章索引 2.1 设计原则(Design Principles) 2.1.1 美学完整性(Aesthetic Inte ...
B端产品经理-表格设计总结
表格:一种可视化的数据交流模式,也是组织整理数据的一种手段,主要承载数据的展示.对比和归纳. 一.设计原则易读:表格应该是一目了然的,层级分明的.让用户的注意力集中在内容而不是表格的形式. 高效:表 ...
变化多端 – 多种纯CSS的HTML表格设计
原文地址为: 变化多端 – 多种纯CSS的HTML表格设计介绍在HTML中,Table节点由于其层层嵌套的节点结构,一度名声很臭,且一度被呼吁用DIV+CSS取而代之.但在实际项目开发中,一碰到规 ...
报表表格间距_从易读性和易操作性两大方面，教你做好表格设计
语:提起中后台,除了高效.灵活和强大之外,不可忽视的还有它的海量数据.海量数据的筛选与呈现,直接决定决策人员的效率高低.本文作者主要是结合自己在实际工作中遇到的表格设计问题,针对Web端数据呈现方式之 ...

HTML（二） -- 表格设计

1. 基本格式：

表格常用属性：

2. 表格标签

2.1 <table>标签

2.2 <thead>标签

2.3 <tbody>标签

2.4 <tr>标签

2.5 <th>标签

2.6 <td>标签（可以记作：单元格标签）

3. 表格的合并

HTML（二） -- 表格设计相关推荐

最新文章

热门文章