CSS笔记(八)表格

  参考:http://www.w3school.com.cn/css/css_table.asp

  实例:

<html>
<head>
<style type="text/css">
/*table {border-collapse:collapse;}*/
table, td, th
  {
  border:1px solid green;
  }

th
  {
  background-color:green;
  color:white;
  }
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>

  效果:

  

  如果将表格边框折叠成单一边框,加上注释行即可,效果如下:

CSS Table 属性

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

  

时间: 2024-10-12 12:09:20

CSS笔记(八)表格的相关文章

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

laravel3学习笔记(八)

原作者博客:ieqi.net ==================================================================================================== Web开发框最大的存在意义无疑是为开发者提供便利,这种被提供的便利不仅表现在对于整个应用接口上的梳理.组织和解耦,也表现在更多细微方便,比如各种工具的提供.Laravel3为开发者提供了各种有关web开发的工具,让开发者在开发应用时只需要关注于自身的业务,而不必在拘泥

HTML+CSS笔记 CSS中级 颜色&长度值

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每

老男孩培训视频听课笔记八(在51cto上听的)--5.8 64bit 基础优化

windows user: administrator guest port 3389 Linux user:root 普通用户很多 Port :22 更改ssh登录配置: 位置: /etc/ssh/ssh_config-client 配置 /etc/ssh/sshd_config --服务器端的配置 修改:第一步,备份服务器端的配置   第二步,编辑--说明 #--注释说明 图:   /etc/init.d – yum /rpm 安装的软件全部在这有启动命令 修改后不能登录,用图标来解释如何判

angular学习笔记(八)

本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: <!DOCTYPE html> <html ng-app> <head> <title>

jQuery整理笔记八----jQuery的Ajax

Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是根据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我觉得说法挺靠谱的. jQuery封装了Ajax的交互过程,用户不需要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest建立连接.发送请求.发送方式.接收方式等细节,利用jQuery定义 的几个简单方法,即可轻松实现客户端与服务端异步通信的问题,从而帮助开发人员从繁琐的技术细节中解脱出来,专心于业务层开发工作. 最初始的JavaScrip

Linux System Programming 学习笔记(八) 文件和目录管理

1. 文件和元数据 每个文件都是通过inode引用,每个inode索引节点都具有文件系统中唯一的inode number 一个inode索引节点是存储在Linux文件系统的磁盘介质上的物理对象,也是LInux内核通过数据结构表示的实体 inode存储相关联文件的元数据 ls -i 命令获取文件的inode number /* obtaining the metadata of a file */ #include <sys/types.h> #include <sys/stat.h>

马哥学习笔记八——LAMP编译安装之PHP及xcache

1.解决依赖关系: 请配置好yum源(可以是本地系统光盘)后执行如下命令: # yum -y groupinstall "X Software Development" 如果想让编译的php支持mcrypt扩展,此处还需要下载如下两个rpm包并安装之: libmcrypt-2.5.7-5.el5.i386.rpm libmcrypt-devel-2.5.7-5.el5.i386.rpm 2.编译安装php-5.4.13 首先下载源码包至本地目录. # tar xf php-5.4.13

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左