25 ,CSS 构造表格
1. 表格的基础构造
2. 边距和边线应用
3. 隐藏和删除应用
1. 简单表格
table {
width:auto;
border-collapse:collapse;
margin-left:20px;
border:1px solid black;
}
td,th {
width:50px;
border:1px solid black;
padding:5px;
background:gold;
text-align:center;
vertical-align:middle;
text-indent:5px;
}
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
<table>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
2. 行组和列组
table.example1 thead {
background:orange;
color:black;
}
table.example1 tbody {
background:gold;
color:black;
}
table.example1 tfoot {
background:firebrick;
color:white;
}
*.col1 {
background:wheat;
}
*.col2 {
background:gold;
}
*.col3 {
background:orange;
}
*.col4 {
background:tomato;
}
*.col5 {
background:firebrick;
}
*.col6 {
background:black;
color:white;
}
<table class="example1">
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table>
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
</colgroup>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
. 3. 表格选择符
<table class="example1">
<thead>
<tr>
<th class="t1">1</th>
<th class="t2">2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table>
. 4. 分隔的边框
table {
border-collapse:separate;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
5. 重复的边框
table {
border-collapse:collapse;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
. 6. 隐藏和删除单元格、行、列
table {
border-collapse:separate;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
border:1px solid black;
}
.hidden {
visibility:hidden;
}
.delete {
display:none;
}
<table>
<colgroup>
<col class="hidden delete" />
</colgroup>
<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
<tr>
<td class="hidden">5</td>
<td class="hidden">6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
. 7. 垂直对齐数据
.x {
vertical-align:middle;
}
1表格的基础构造1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
border:1px solid black;
/* border-collapse 有 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
separate： 边框独立
collapse： 相邻边被合并 */
width: auto;
border-collapse: collapse;
}
th,td{
background: gold;
width：50px；
border: 1px solid black;
padding: 5px;
}
</style>
</head> <body>
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
<tr><th>1</th><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</body>
</html>
1表格的基础构造2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
width:auto;
border-collapse:collapse;
margin-left:20px;
border:1px solid black;
}
td,th {
width:50px;
border:1px solid black;
padding:5px;
background:gold;
text-align:center;
vertical-align:middle;
text-indent:5px;
}
</style>
</head> <body>
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
<table>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table> </body>
</html>
2表格的行组和列组
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table.example1 thead {
background:orange;
color:black;
}
table.example1 tbody {
background:gold;
color:black;
}
table.example1 tfoot {
background:firebrick;
color:white;
}
*.col1 {
background:wheat;
}
*.col2 {
background:gold;
}
*.col3 {
background:orange;
}
*.col4 {
background:tomato;
}
*.col5 {
background:firebrick;
}
*.col6 {
background:black;
color:white;
}
</style>
</head> <body>
<table class="example1">
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table>
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
</colgroup>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table> </body>
</html>
3表格选择符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table.example1 thead {
background:orange;
color:black;
}
table.example1 tbody {
background:gold;
color:black;
}
table.example1 tfoot {
background:firebrick;
color:white;
}
*.col1 {
background:wheat;
}
*.col2 {
background:gold;
}
*.col3 {
background:orange;
}
*.col4 {
background:tomato;
}
*.col5 {
background:firebrick;
}
*.col6 {
background:black;
color:white;
}
</style>
</head> <body>
<table class="example1">
<thead>
<tr>
<th class="t1">1</th>
<th class="t2">2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
</tfoot>
</table> </body>
</html>
4表格分隔的边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
border-collapse:separate;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
</style>
</head> <body>
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table> </body>
</html>
5表格重复的边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
border-collapse:collapse;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
</style>
</head> <body>
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table> </body>
</html>
6隐藏和删除单元格、行、列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
border-collapse:separate;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
border:1px solid black;
}
.hidden {
visibility:hidden;
}
.delete {
display:none;
}
</style>
</head> <body>
<table>
<colgroup>
<col class="hidden delete" />
</colgroup>
<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
<tr>
<td class="hidden">5</td>
<td class="hidden">6</td>
<td>7</td>
<td>8</td>
</tr>
</table> </body>
</html>
7表格 垂直对齐数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.x {
vertical-align:middle;
}
</style>
</head> <body>
<table>
<colgroup>
<col id="x" />
</colgroup>
<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
<tr>
<td class="hidden">5</td>
<td class="hidden">6</td>
<td>7</td>
<td>8</td>
</tr>
</table> </body>
</html>
25 ,CSS 构造表格的更多相关文章
- CSS构造表格
表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table { width:auto; border-collapse:collapse;(把单元格空隙合并起来) m ...
- CSS 构造表格
表格边框 CSS 中设置表格边框,请使用 border 属性: <style type="text/css"> table{ border:1px solid red; ...
- CSS控制表格（table）样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
- css构造文本
1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...
- 四个好看的CSS样式表格
文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...
- 常用的四种CSS样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
- 24, CSS 构造超链接
1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...
- 23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...
随机推荐
- 深入理解es6-Promise对象
前言 在之前翻博客时,看到promise,又重读了一边,突然发现理解很浅,记的笔记也不是很好理解,又重新学习promise,加深理解,学以致用 在promise出来之前,js常用解决异 ...
- 个人简历模板web
根据自己以前使用的简单简历表格,对其进行了web前端还原,也算对自己初步学习知识的一个小小的记录. 下面是简历预览效果,很简洁的那种: 代码中没什么太困难的地方,主要记录下自己遇到的几个小问题吧: 1 ...
- 服务部署到Swarm Cluster中
对于已存在的镜像,将其部署到服务器中并开始对外服务,便是它的职责,而我们要做的便是帮助它完成职责,前两个应用环节都已产生了相应的镜像,在这一环节,将完成服务部署到容器集群的工作,对于这一过程,实际执行 ...
- docker常规操作——启动、停止、重启容器实例
一.启动一个已经停止的容器实例 docker start 容器ID或容器名,建议使用容器ID,容器ID支持模糊查询而容器名称不支持1. 先查看已经暂停的容器实例信息 2. 通过docker start ...
- 第一课《.net之--泛型》
今天我来学习泛型,泛型是编程入门学习的基础类型,从.net诞生2.0开始就出现了泛型,今天我们开始学习泛型的语法和使用. 什么是泛型? 泛型(generic)是C#语言2.0和通用语言运行时(CLR) ...
- SQL 横转竖 、竖专横（转载） 列转行 行转列
普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 想变成(得到如下结果): 姓名 语文 数学 物理 --- ...
- 结合JDK源码看设计模式——单例模式
定义: 保证一个类仅有一个实例,并提供一个全局访问点 适用场景: 确保任何情况下这个对象只有一个实例 详解: 私有构造器 单利模式中的线程安全+延时加载 序列化和反序列化安全, 防止反射攻击 结合JD ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- ArcGIS消除图斑重叠错误
在生产中,经常会遇见有图斑重叠这种拓扑错误的矢量,大部分情况下,需要人工比对影像处理.但是如果只需要用到这些矢量的形状.面积,可以在ArcMap中用以下方法,快速消除图斑重叠错误,不必手工处理. 如下 ...
- django中出现 错误 Errno 10053
django中出现 错误 Errno 10053 pycharm里出现下面错误File "C:\Python27\lib\socket.py", line 307, in flus ...