三、CSS样式——表格
1、CSS表格
CSS表格属性可以帮助我们极大的改善表格的外观
2、表格边框
3、折叠边框
4、表格宽高
5、表格文本对齐
6、表格内边距
7、表格颜色
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
</table>
</body>
</html>
/*style.css*/
#tb,tr,th,td{
border: 1px solid blueviolet;
text-align: center;
background-color: red;
} #tb{
width: 400px;
height: 400px;
border-collapse: collapse;
/*!*将两条边框合并成一条边框*!*/
}
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr class="alt">
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
</table>
</body>
</html>
#tb{
border-collapse: collapse;
width: 500px;
}
#tb td,#tb th{
border: 1px solid darkolivegreen;
padding: 5px;
}
#tb th{
text-align: left;
background-color: blueviolet;
color: white;
}
#tb tr.alt td{
color: black;
background-color: aqua;
}
三、CSS样式——表格的更多相关文章
- 四个好看的CSS样式表格
文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...
- 常用的四种CSS样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- css样式 -- 表格不会因为字体过长导致字体溢出的问题
常常碰到因为表格大小就麽大了,字体过长会爆炸溢出的问题,我们后端就用这个可以了,溢出的可以省略号 ... 代替好了. /* 在表格css样式加上这三个就可以了 效果就会变成 “abc...” */ { ...
- LODOP打印超文本字符串拼接2 单选选择css样式表格
之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...
- css样式-表格优化
1.表格的初步优化 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- css样式--表格
1.示例源码 <!DOCTYPE html><html><head><meta charset="utf-8"> <title ...
- css样式表格边框1px hover时为2px 实现方式
//css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...
随机推荐
- MFC中关于运行时类信息及动态创建对象的两个宏的意义（转）
http://blog.csdn.net/ligand/article/details/49839507 MFC运行时类信息 用途: 程序在运行时,获取对象类的信息及类的继承关系 实现: 1.定义的类 ...
- Visual C++ 6.0中if的简单用法
# include<stdio.h> int main (void) { > ) printf("AAAA"); printf("BBBB") ...
- Python全栈之路----常用模块----re 模块
正则表达式就是字符串的匹配规则,在多数编程语言里都有相应的支持,python里对应的模块是 re. re的匹配语法有以下几种 re.match 从头开始匹配 re.search 匹配包含 re.fin ...
- mongoDB数据库的安装与配置
noSql数据库MongoDB的安装地址:https://www.mongodb.com/download-center?jmp=nav#community 选择相应的版本进行下载,在此以window ...
- Linux可以生产uImage
默认kernel只生产Image和zImage,若想让kernel生产uImage,需要用到mkimage,这个是uboot可以提供的,位于uboot/tool/目录下,将其加入到环境变量即可.
- HNOI2006公路修建问题
https://www.luogu.org/problemnew/show/P2323 [题目描述] OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发 ...
- linux路由
https://www.cnblogs.com/luckyall/p/6418965.html https://www.cnblogs.com/dapaitou2006/p/6564622.html一 ...
- VLC播放器
为了将多个视频放在一个窗口,最开始想用的是windows media player ,6个视频,把整个电脑卡得不动了(显卡太弱,是多输出口的,没法换),于是又想把视频压缩成一个,网上的大部分软件要收费 ...
- 将Json数据 填充到 实例类 的函数
/// <summary> /// 将Json数据 填充到 实例类 /// </summary> /// <typeparam name="T"> ...
- 【python】python打包生成的exe文件运行时提示缺少模块
事情是这样的我用打包命令:pyinstaller -F E:\python\clpicdownload\mypython.py打包了一个exe程序,但是运行时提示我缺 少bs4模块然后我就去查pyin ...