三、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 ...
随机推荐
- 无空格字符串的break-all的性能问题
- Virtualization
time sharing——>virtualization. OS需要low-level machinery mechanisms and high-level intelligence. 前者 ...
- NABCD（团队项目）
N (Need 需求) 随着时代的进步和手机迅速发展,各种软件充斥这我们的生活,在学校里,我们总为一些各种各样的群所困扰,我们需要一件工具整合信息,让我们的生活更加便利. A (Approach 做法 ...
- python 编写登陆接口
#!/usr/bin/env python#_*_ coding:utf-8 _*_dic={ 'yts':{'password':'123','count':0}, 'nick':{'passwor ...
- PL/SQL连接远程服务器数据库，出现ORA-12154: TNS: 无法解析指定的连接标识符。
故障环境:上礼拜新装了一台服务器(win server2008r2),并在服务器上安装了ORACLE 11g database.且已经做好监听配置,开通了1521端口. 我又在局域网内另一台pc端装了 ...
- HTML复习 2019-2-11
HTML复习 2019-2-11 <!doctype html> <html> <!-- 常见问题答疑 Question 1:HTML标签可以大写吗? 大小写都可以,比如 ...
- 关于符号匹配题的一些思考过程--含cin.getline（）函数的一些基本原理
刚刚拿到题目的时候,还没啥感觉,就是觉得要用到if--else就可以了,但是一联想到现在是在学栈,那么是不是要用到栈呢? 一.那么先看看题目吧 给定一串字符,不超过100个字符,可能包括括号.数字.字 ...
- Spark:将DataFrame写入Mysql
Spark将DataFrame进行一些列处理后,需要将之写入mysql,下面是实现过程 1.mysql的信息 mysql的信息我保存在了外部的配置文件,这样方便后续的配置添加. //配置文件示例: [ ...
- sqlserver 表操作 SQL篇
数据库知识点 1.数据库操作: 增:insert into 表名 values(值1,值2,值3) 删:delete 列名 from 表名 where 条件 改:update 表名 set =值 wh ...
- linux子系统ubuntu16.04安装使用xrdp当远程桌面
参考文献:https://icytown.com/windows/windows-subsystem-for-linux-gui-xubuntu/ https://jingyan.baidu.com/ ...