【丛林】HTML Table 表格浅谈(边框、隔行变色
此例子已经包含本文大部分内容,请对照参考。查看代码 》
定义和用法
table
标签定义 HTML 表格。
创建表格的四要素:table
、tr
、th
、td
<table>
整个表格以<table>
标记开始、</table>
标记结束。
<tr>
Table row。表格的一行,有几对 tr 表格就有几行。
<td>
Table data。表格的一个单元格,一行中包含几对 td ,一行中就有几列。
<th>
Table head。表格的头部的一个单元格,表格表头。
额外元素
<tbody>
、<thead>
、<tfoot>
表格结构,如果不加<thead> <tbody> <tfooter>
, 表格将在加载完后才显示。加上这些, tbody
包含行的内容优先显示,不必等待表格结束后再显示。
同时,如果表格很长,用tbody
分段,可以一部分一部分地显示。
(通俗理解 table 可以按结构一块块的显示,不用等整个表格加载完后显示。)
<caption>
表格标题
属性
border
表格边框的宽度。
建议设置为 0 后自行 CSS 添加边框样式。
cellpadding
表格单元边界与单元内容之间的间距(内边距)。
建议设置为 0 后自行 CSS 添加内边距样式。
cellspacing
单元格之间的间距。
实例
使用CSS3实现表格隔行变色
例子代码更加直观易懂 查看代码 》
使用 CSS3的 :nth-child(n)
伪类选择器可以实现表格隔行变色的效果。
n 可填写 odd、even或任意数字,分别代表奇数行/列、偶数行/列或指定行/列
【丛林】HTML Table 表格浅谈(边框、隔行变色的更多相关文章
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- 隔行变色---bai
<!DOCTYPE html> <html> <style> .mousein { background-color:blue; cursor: pointer; ...
- 浅谈如何正确给table加边框
一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- table表格设置边框线为单实线
设置table表格边框为单实线的方法有两种 第一种方法就是利用table标签cellspacing=0属性来实现,cellspacing是内边框和外边框的距离,这种方法实现的看起来是单实线,其实是内边 ...
- 表格(Table)隔行变色
在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...
- table 表格 细边框 最简单样式
table 表格细边框的效果实现方法虽然不难,但网上简单有效的方法却很少,在此记录一下 css 样式 /** table 细边框 **/ table{border-collapse: collapse ...
- BootStrap的table表格,栅格系统,form表单的样式
BootStrap BootStrap的简介 1. 什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2. 为什么使用B ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
随机推荐
- IQueryable不能使用异步方法的解决方案
---恢复内容开始--- 看见别人用Linq to Sql的Async好久了,我还没开始用,感觉太土了,跟不上潮流了,打开vs,就准备写个查询,然后发现我用一个IQueryable的对象,怎么都点不出 ...
- 2016/7/26-apache配置文件:http.conf配置详解
引用地址http://blog.chinaunix.net/uid-21807675-id-1814871.html Apache的配置文件http.conf参数含义详解 Apache的配置由http ...
- LeetCode 230. Kth Smallest Element in a BST 动态演示
返回排序二叉树第K小的数 还是用先序遍历,记录index和K进行比较 class Solution { public: void helper(TreeNode* node, int& idx ...
- 关于狗书《Flask web开发 基于python的Web开发应用实战》中加入用户隐私功能
目前是第二次撸狗书,在用户页面这一块我个人觉得有些问题(基于交互设计).按理来说,我作为一个权限只有User的个人用户来说,肯定不喜欢让别人看到我的真实姓名,地址之类的敏感信息.所以我应该是可以设置成 ...
- 20190818 On Java8 第八章 复用
第八章 复用 组合语法 初始化引用有四种方法: 当对象被定义时.这意味着它们总是在调用构造函数之前初始化. 在该类的构造函数中. 在实际使用对象之前.这通常称为延迟初始化.在对象创建开销大且不需要每次 ...
- GB/T2659-2000《世界各国和地区名称代码》
代码 代码名称 004 阿富汗 008 阿尔巴尼亚 012 阿尔及利亚 016 美属萨摩亚 020 安道尔 024 安哥拉 660 安圭拉 010 南极洲 028 安提瓜和巴布达 032 阿根廷 05 ...
- EF - order by specific values
List<string> s = new List<string>() { "A", "家", "帮", " ...
- jmeter:清除本地指定目录下的所有类型文件
1,创建一个sampler 2,要在本地有一个目录的文件 3,直接上代码 String path = "C:\\临时文件\\test111" ; File file ...
- golang的数据类型之浮点类型
[root@node3 shangxuetang]# cat float.go package main import "fmt" //演示golang中小数类型使用func ma ...
- kmp(单次匹配)
http://acm.hdu.edu.cn/showproblem.php?pid=1711 Number Sequence Problem Description Given two sequenc ...