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

随机推荐

Python调用ansible API系列（三）带有callback的执行adhoc和playbook
在第二篇文章中虽然可以执行adhoc和playbook但是执行结果的输出并不是特别直观,虽然没有报错但是到底什么结果其实你是不知道的尤其是在执行adhoc的时候,这时候我们要利用callback来设置 ...
Java进阶篇设计模式之十一 ---- 策略模式和模板方法模式
前言在上一篇中我们学习了行为型模式的访问者模式(Visitor Pattern)和中介者模式(Mediator Pattern).本篇则来学习下行为型模式的两个模式,策略模式(Strategy Pa ...
C#-Xamarin利用ZXing.Net.Mobile进行扫码
前言很多人觉得Xamarin的开源少,没法用来开发项目. 但,实际上Xamarin已经有很多开源代码了:只要不是特别特殊的项目,基本上是都可以满足开发. 下面我们来看一下Xamarin中利用开源代码 ...
Unity的UI究竟为什么可以合批
1.UI/Default代码研究首先,我想到的是,既然是对图集纹理进行采样,而且又不能统一更改材质的纹理UV值,我们通常写的shader都是直接根据模型UV值对主纹理进行采样,那会不会是shader中 ...
ML.NET 发布0.11版本：.NET中的机器学习，为TensorFlow和ONNX添加了新功能
微软发布了其最新版本的机器学习框架:ML.NET 0.11带来了新功能和突破性变化. 新版本的机器学习开源框架为TensorFlow和ONNX添加了新功能,但也包括一些重大变化, 这也是发布RC版本之 ...
.NET程序员不加班——写在《华为工程师猝死，36岁，22月无休》之后
我首先承认,有点标题党.因为这是我这个十年老码农——过了年就整整11年了,o(╥﹏╥)o——的个人观察.经验所得.如果有仍在加班的.NET童鞋,不要打我.一定要打的话,只有一个要求:不要打脸! 写这篇 ...
Excel日期中那个著名的bug
一个软件中的bug能够持续多久?答案不一,大多数bug在软件测试阶段就已经被干掉,又有许多死在Preview阶段,抑或正式上线后不久被干掉,有些则伴随软件终生,直到下一代产品发布才寿终正寝,而Exce ...
Window10升级遇到大坑错误代码：0xc000000e完美解决方案
昨天忽然升级了,然后并没有立即重启更新,因为但是正在工作所以等下班回到家后就是一直提示:文件:\Windows\system32\winload.efi 错误代码:0xc000000e!!! 如下图所 ...
mpvue小程序开发之城市定位
背景: 在进行小程序开发时,有一个定位城市的需求,下面就来讲讲怎么实现这个功能的吧解决方案: 小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名 ...
了解一下RabbitMQ
RabbitMQ概述 RabbitMQ是遵从AMQP协议的通信协议都设计到报文交互,换句话说RabbitMQ就是AMQP协议的Erlang的实现. AMQP说到底还是一个通信协议从low-level ...

25 ,CSS 构造表格

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

随机推荐

热门专题