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>

</table>

<table>

</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;

}

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

<table>

</colgroup>

</table>

. 3. 表格选择符

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

</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>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<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>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<tr><td>7</td><td>8</td><td> </td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<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>

<tr>

</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: ...

随机推荐

Jenkins 集成 SonarQube Scanner
1. 安装Jenkins 下载安装包,这里我们下载war包 https://jenkins.io/download/ 运行jenkins.war的方式有两种: 第一种:将其放到tomcat中运行( ...
.netcore2.1在控制器中和类中，获取appsettings中值的方法
一般我们在开发项目中,都会从配置文件中获取数据库连接信息.自定义参数配置信息等. 在.netcore中在控制器和自定义类中,获取配置文件中参数方式如下: appsettings.json { &quo ...
C:\Program Files\Java\jdk1.7.0_79\bin\java.exe'' finished with non-zero exit value 1
转载请标明出处:https://www.cnblogs.com/tangZH/p/10538982.html 今天,在项目过程中碰到了这个奇怪的问题,C:\Program Files\Java\jdk ...
Android底部导航栏(可滑动)----TabLayout+viewPager
[TabLayout] ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组.属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ② ...
Vue(day4)
这里说的Vue中的路由是指前端路由,与后端路由有所区别.我们可以使用url来获取服务器的资源,而这种url与资源的映射关系就是我们所说的路由.对于单页面程序来说,我们使用url时常常通过hash的方法 ...
PHP内核之旅-6.垃圾回收机制
回收PHP 内核之旅系列 PHP内核之旅-1.生命周期 PHP内核之旅-2.SAPI中的Cli PHP内核之旅-3.变量 PHP内核之旅-4.字符串 PHP内核之旅-5.强大的数组 PHP内核之旅-6 ...
C# 中的Async 和 Await 的用法详解
众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译 ...
使用C#+XPath+HtmlAgilityPack轻松搞一个资源下载器
HtmlAgilityPack简介 HtmlAgilityPack是一个开源的解析HTML元素的类库,最大的特点是可以通过XPath来解析HMTL,如果您以前用C#操作过XML,那么使用起HtmlAg ...
.NET Core微服务之基于Steeltoe使用Hystrix熔断保护与监控
Tip: 此篇已加入.NET Core微服务基础系列文章索引 => Steeltoe目录快速导航: 1. 基于Steeltoe使用Spring Cloud Eureka 2. 基于Steelt ...
【工利其器】必会工具之（三）systrace篇（1）官网翻译
前言 Android 开发者官网中对systrace(Android System Trace)有专门的介绍,本篇文章作为systrace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续 ...

25 ,CSS 构造表格

25 ,CSS 构造表格的更多相关文章

随机推荐

热门专题