HTML创建表格及合并单元格

创建表格

-------------------------------------写在前面--------------------------------------------
在HTML中的表格和我们日常生活中的表格是有所差距的，在平时我们认为表格是单纯的由行和列组成的，如下图1所示，但在HTML中，表格是由边框、行和单元格组成的，边框是最外面的一层大框，行与我们平时理解的一样，但列我们可以理解为在一行之中又放了一些小的单元格组成，即表格中的列由行中的单元格决定哪个。如下图二所示：
## 图1

图2

1、在HTML网页中，想要创建表格就要使用表格标签，基本语法如下所示;

<table><tr><td>单元格内文字</td>.....</tr>
</table>

举例：创建一个3*3的表格，实现的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table height="300" width="300" border="1" ><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>李华</td><td>女</td><td >18</td></tr><tr><td>王欢</td><td>男</td><td >18</td></tr><tr><td>蔡军</td><td>男</td><td>20</td></tr></table>
</body>
</html>

注：width，height分别用来指定表格的宽度度高度，border用来指定表格的边框值，咋该例中我指定表格表框的像素值为1.
则设计的结果如下图所示：

2、关于表格的常用属性：

属性名	含义	常用属性值
border	设置表格的边框（border=0）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认2）
cellpodding	设置单元格内容与单元边框之减的空白间距	像素值（默认2）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网格之中的对齐方式	left、centre、right

3、表头标签
表头一般位于表格的第一行或第一列，其文本居中加粗，即为设置了表头的表格。设置表头标签用<th></th>代替相应的单元格标签<td></td>即可。
例、将刚才3*3表格中的第一行（姓名、性别、年龄）设置为表头标签。则更改部分的代码如下所示：

<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>

4、表格结构
可用<thead></thead>将表头部分包括
用<tbody></tbody>将主体部分包括
这样做之后表的结构会发生一些变化：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table height="300" width="300" border="1" ><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>李华</td><td>女</td><td >18</td></tr><tr><td>王欢</td><td>男</td><td >18</td></tr><tr><td>蔡军</td><td>男</td><td>20</td></tr></tbody></table>
</body>
</html>

如下图所示：

5、表格标题
表格的标题：caption
定义和用法：

<table ><caption>我是标题</caption></table>

用代码实现（采用左对齐的方式）

<table height="300" width="300" border="1" align="centre"><caption>Student</caption>
</table>

结果如下图：

注：caption标签必须紧随table标签之后，只能对表格定义一个标题，通常这个标题居中位于表格之上。
6、合并单元格
跨行合并：rowspan
跨列合并：colspan
合并单元格的思想：将多个内容合并的时候就会有多余的东西出来，将其删除。如：将3个td合并成一个，那就多余了2个td,则将多余的两个td删除。
公式：删除的个数=合并的个数-1
如将3个单元格合并成一个，则应删除多余的2个。
单元格合并的次序：从上至下
从左至右
例：将表中的两个年龄（18）合并成1个，代码如下图所示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table height="300" width="300" border="1" align="centre"><caption>Student</caption><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>李华</td><td>女</td><td  rowspan="2">18</td></tr><tr><td>王欢</td><td>男</td> </tr><tr><td>蔡军</td><td>男</td><td>20</td></tr></table>
</body>
</html>

简单总结：1、表格提供了HTML中定义表格式数据的方法
2、表格中的列由行中的单元格决定。

HTML创建表格及合并单元格相关推荐

如何通过VB合并Excel单元格以及设置Excel行高？VB创建Excel表格，合并单元格，生成图形等操作
如何通过VB合并Excel单元格以及设置Excel行高? 例如:我想把第一列的第4,5,6,7行合并...我在怎样让合并单元格里的字居中,怎样改变字体. 请不吝赐教... ============== ...
Tableau表格取消合并单元格
客户回访(Client Review) 文章目录前言一.原表格样式二.回访收集到的述求三.表格合并单元格方法 (一)创建"序号"计算字段 (二)将"序号" ...
HTML5网页设计阶梯教程（4）——创建表格和设置单元格的大小
上一章我讲了图片的插入和文字编辑,这一章,我讲一下如何创建表格和设置单元格的大小: 首先,先认识用于创建表格的标记: 下面展示一段在网页中插入三行三列表格的代码: 上述代码中的border标记表示表格 ...
python合并word表格单元格_python docx模块读取word表格遇到合并单元格时的处理
python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表遇到合并单元格时的处理通 ...
easyExcel导出表格及合并单元格
easyExcel导出表格及合并单元格前言废话不多说,直接上效果图. 效果图合并之前导出的: 合并之后导出的: 代码的实现主要是合并之后的,为了更好的分清数据之间的关系. 二.代码目录 < ...
html表格怎么纵向合并单元格,在html中表格如何合并单元格
在html中表格如何合并单元格发布时间:2020-04-28 10:55:12 来源:亿速云阅读:777 作者:小新这篇文章主要为大家详细介绍了在html中表格如何合并单元格,文中示例代码介绍的 ...
html合并的列内容不居中显示,表格不能合并居中 excel表格不能合并单元格怎么办...
Excel 单元格不能合并了,合并单元格选项是灰色的无法合并单元格,主要是因为几个单元格之间套用了格式,所以无法合并单元格. 具体的解决方法如下: 选中相应的单元格,然后,点击工具栏上"设计 ...
layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格、合并单元格)
本编文章继SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格)文章之后介绍Poi-tl导出word的延伸功能: 所需依赖以及word模板所属位置见 SpringBoo ...

HTML创建表格及合并单元格

创建表格

图2

HTML创建表格及合并单元格相关推荐

最新文章

热门文章