【丛林】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图片) 压缩( ...
随机推荐
- 16/7/14-MySQL-遇到的基本问题
从一开始遇到的3534 ---------------------------------------------------------------------------------------- ...
- Java + selenium 元素定位(6)之iframe切换(即对富文本框的操作)
在元素定位中,对富文本框的元素定位是特别的,当我们使用普通的元素定位方法对富文本框进行操作时,我们会发现不管我们之前介绍的八种方法中的任何方法,我们都不能成功定位到富文本框,并对其进行操作.那是因为富 ...
- is_numeric漏洞总结
将16进制数据判断为数据,这样在存入数据库后,数据库会把16进制解析成字符串,可能造成二次注入 转载: https://www.jianshu.com/p/e7cf997d6ccb
- netcore之mysql中文乱码问题解决记录
尝试了netcore代码里面设置基本无效了 https://dev.mysql.com/doc/connector-net/en/connector-net-entityframework-core- ...
- Learning OSG programing---Multi Camera in Multi window 在多窗口中创建多相机
这个例子演示了在多个窗口中创建多个相机,函数的代码如下: void multiWindowMultipleCameras(osgViewer::Viewer& viewer,bool mult ...
- 表单验证之在a标签跳转之前执行其他操作(DOM与$两种实现方式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js(6)--v-model
v-model实现数据的双向绑定(简易计算器实例) 简易计算器实例 <!DOCTYPE html> <html lang="en"> <head> ...
- JS书目推荐(私教推荐)
下面几本书是私教推荐的,从入门到提高,从易到难,想找电子版的可以去下面这个网站找找,挺多书籍的 鸠摩搜书https://www.jiumodiary.com/ JavaScript编程精解 (第二版) ...
- win10搭建ftp环境
1.进入程序,并点击“启用或关闭windows功能” 2.勾选对应的功能,并点击“确定” 3.进入IIS 4.如下图 5.如图 6.如图 7.如下图 8.创建新用户,用于登录ftp(自行创建) 9.禁 ...
- python实战-有道翻译
#导入urllib包里的request请求模块import urllib.request#导入urllib包里的解析模块 import urllib.parse import json content ...