三、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 ...
随机推荐
- Codeforces1100F. Ivan and Burgers(离线+线性基)
题目链接:传送门 思路: 按查询的右端点离线. 然后从左到右维护线性基. 每个基底更新为最右边的方案,可以让尽量多的查询享受到这个基底. 用ci维护后更新右端点为i的答案. 代码(析构1000ms,别 ...
- adb环境配置+常用adb命令+Logcat命令的用法+手动进行文件比对的方法+批量挪bug
1. adb环境配置:下载adb环境变量包:打开计算机属性-高级系统设置-环境变量:新建变量adb,值为刚才的环境变量包路径:编辑path值,在最后面加上;%adb%;确定就妥了 2. 常用adb命令 ...
- CMDB-实现的几种方式
CMDB的用处:手机服务器的元信息 LINUX基础指令 查看IP地址 : ifconfig 查看主机名: hostname 查看CUP信息: cat /proc/cpuinfo 查看磁盘信息 : df ...
- Linux安装MySQL_5.6
E&T: CentOS_7.4 64位; mysql-5.6.42-linux-glibc2.12-x86_64.tar; Xftp5; Xshell5; P1.下载Linux环境下的MySQ ...
- centos 终端字体错位个别字母中间有间隔的解决
问题描述: linux系统:centos 终端:图形界面终端,通过startx启动 现象:通过终端输入的字体有重叠,字母之间的间隔也很大.由于字体安装不正确导致. 解决方法:通过下面字体的安装命令可以 ...
- 创建一个dynamics 365 CRM online plugin (八) - 使用Shared Variables 在plugins 之前传递data
CRM 可以实现plugin之前的值传递. 我们可以使用SharedVariables 把值在plugin之间传递 实现plugins之间的传递非常简单,我们只需要用key value pair来配对 ...
- salt+jenkins+gitlab+ecs构建公司部署平台
1.网络架构图如下 2.采用这种方案的原因 1.现网机器都在各个省机房内网,或者堡垒机内部.无法直接从公司总部ssh到各个现网机器 2.现网机器可以访问到公网.因此可以从公网下载制作的tar包 3.每 ...
- 关于让simulink中display组件显示二进制的方法
关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...
- Winform 窗体实现圆角展示
触发窗体的Resize事件,如下所示: #region 界面实现圆角 private void LoginForm_Resize(object sender, EventArgs e) { if (t ...
- 使用密钥登录CentOS系统(基于密钥的认证)
在Window客户端有多种软件可以登陆ssh,比如putty,xshelll,secureCRT,我就以xshell为例设置使用公钥和私钥验证登陆服务器. 使用Xshell密钥认证机制远程登录Linu ...