简单解析表格table标签的用法

1.表格加上边框并且效果如下图所示:

cellspacing(单元格间距): 表格边框与单元格的边框之间的缝隙

cellpadding(单元格边距): 单元格内容与单元格边框之间的距离

这两个属性默认是有值的,当设置border它会显化出来

因此要使表格是单层框线(如上图所示的效果)的话,

那么它编写的代码应该如下所示:

<table cellspacing="0px" cellpadding="0px" border="1px"></table>

2.表格如何合并列

关键属性为:colspan(合并几个colspan的值就为几)

思想:

1.在合并开始位置(i)单元格设置colspan=“合并个数”

2.从合并开始位置的后一个位置起,把与合并开始位置保证同一行(tr中的第i+1个位置)的那个单元格去掉.直到去掉到合并的最后一个位置

<table cellspacing="0px" cellpadding="0px" border="1px"><tr><!-- 第一行的三个单元格合并--><td colspan="3"></td></tr><tr><!-- 第二行的前两个单元格合并--><td colspan="2"></td><td></td></tr><tr><!-- 第三行的后两个单元格合并--><td></td><td colspan="2"></td></tr>
</table>

显示效果如下图所示

3.表格如何合并行

关键属性为:rowspan(合并几个rowspan的值就为几)

思想:

1.在合并开始位置(i)单元格设置rowspan=“合并个数”

2.从合并开始位置的后一个位置起,把与合并开始位置保证同一行(tr中的第i个位置)的那个单元格去掉.直到去掉到合并的最后一个位置

<table cellspacing="0px" cellpadding="0px" border="1px"><tr><td rowspan="2" height="200px">友爱</td><td height="100px">友爱</td><td rowspan="3" height="300px">友爱</td></tr><tr><td rowspan="2" height="200px">友爱</td></tr><tr><td height="100px">友爱</td></tr>
</table>

显示效果如下图所示

4.表格如何保证文件文字居中

<!-- 对每一行的tr设置align=center(默认为left)设置tr会对里面所有的td生效对每一行的tr设置valign=middle(默认为middle,还有top,bottom两个属性)
-->
<tr align=center><td>12</td><td>13</td><td>14</td>
</tr>

简单解析表格table标签的用法相关推荐

表格table标签的属性及使用方式
表格 table 创建表格在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本语法格式如下: <table><tr><td>单元格内的文字&l ...
HTML5(七)表格-table标签、tr标签、td标签
table标签用于定义一个表格,在网页当中加入一个table标签就相当于定义了一个表格.td和tr标签是table的子标签,分别用于定义行和列 <!DOCTYPE html> <ht ...
用html语言编写表格,HTML表格（table标签）
在 HTML 中,我们使用一个完整的表格由多个标签构成,我们不妨先来看一段简单的 HTML 代码: 网站域名分类 C语言中文网 c.biancheng.net 在线教育百度 www.baidu ...
HTML表格table和列表ul、ol、dl标签
文章目录 1. HTML表格 table 标签 2. HTML 列表无序列表有序列表自定义列表 1. HTML表格 table 标签表格由<table>标签定义.每个标签均有若干行 ...
HTML常用标签（a标签/img标签/table标签）
<HTML常用标签> 最近学习了一些关于HTML的常用标签,并在此做个博客来详细说明这些标签的具体属性以及用法,用于记录学习笔记以及检验学习成果. 本文的主要内容有: a标签的用法 img ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
web前端——table标签
table:表格的意思,在早期的时候,table是非常常用的,现在还有好多后台人员在用这个标签.但是现在不推荐使用table这个标签. table标签的用法: <table> <tr ...
html语言制作表格模板,十个最简单实用的Table设计模板
表格恐怕是 Web 设计中最困难的一个对象了,感谢神秘的标记语言,有太多的细节我们需要关注了,而且表格缺乏浏览器的兼容性.虽然表格只是一个简单的元素,但是它浪费了我们大量的时间.有人甚至说, 标签是垃 ...
使用table标签制作常用的html表格
table 标签用于定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. ...

简单解析表格table标签的用法

简单解析表格table标签的用法

1.表格加上边框并且效果如下图所示:

2.表格如何合并列

3.表格如何合并行

4.表格如何保证文件文字居中

简单解析表格table标签的用法相关推荐

最新文章

热门文章