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

随机推荐

神奇的Scala Macro之旅（四）- BeanBuilder
在Java开发中,经常会有一个需求,将一个 Bean 复制到另外一个 Bean,尤其是在后台分层的场景下,在不同的层之间传递信息,经常需要进行这样的一个对象复制工作,类似于: val source: ...
从壹开始前后端 [vue后台] 之一 || 权限后台系统 1.0 正式上线
缘起哈喽各位小伙伴周三好,春节已经过去好多天了,群里小伙伴也各种催搞了,新年也接了新项目,比较忙,不过还是终于赶上这个二月的尾巴写了这篇文章,也把 vue 权限后台上线了(项目地址:http://1 ...
负载，性能测试工具-Gatling
前言 Gatling Gatling是一款功能强大的负载测试工具,它为易于使用,高可维护性和高性能而设计. 开箱即用,Gatling由于对HTTP协议的出色支持,使其成为负载测试任何HTTP服务器的首 ...
Python爬虫入门教程 63-100 Python字体反爬之一，没办法，这个必须写，反爬第3篇
背景交代在反爬圈子的一个大类,涉及的网站其实蛮多的,目前比较常被爬虫coder欺负的网站,猫眼影视,汽车之家,大众点评,58同城,天眼查......还是蛮多的,技术高手千千万,总有五花八门的反爬技术 ...
从一到万的运维之路,说一说VM/Docker/Kubernetes/ServiceMesh
摘要:本文从单机真机运营的历史讲起,逐步介绍虚拟化.容器化.Docker.Kubernetes.ServiceMesh的发展历程.并重点介绍了容器化阶段之后,各项重点技术的安装.使用.运维知识.可以说 ...
css节点选择器
基础选择器基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别: ID选择器标签选择器类选择器属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下: #c ...
Vue2.0源码阅读笔记（三）：计算属性
计算属性是基于响应式依赖进行缓存的,只有在相关响应式依赖发生改变时才会重新求值,这种缓存机制在求值消耗比较大的情况下能够显著提高性能. 一.计算属性初始化 Vue 在做数据初始化时,通过 in ...
Java_基础篇（数组的反转）
数组反转也是Java的基础. 数组反转要求掌握的是: 1).创建一个数组,在内存中申请一块空间. 2).实例化数组. 3).对数组的了解.如:数组的长度,数组的下标,数组的表示方法. 4).数组的交换 ...
设计模式之面向切面编程AOP
动态的将代码切入到指定的方法.指定位置上的编程思想就是面向切面的编程. 代码只有两种,一种是逻辑代码.另一种是非逻辑代码.逻辑代码就是实现功能的核心代码,非逻辑代码就是处理琐碎事务的代码,比如说获取连 ...
sqlite数据库如何远程连接?
sqlite数据库如何远程连接代码如下:QSqlDatabase db =QSqlDatabase::addDatabase("QSQLITE"); db.setHostName( ...

25 ,CSS 构造表格

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

随机推荐

热门专题