【丛林】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图片) 压缩( ...
随机推荐
- Vagrant 入门 - 项目设置
原文地址 配置 Vagrant 项目的第一步是创建 Vagrantfile 文件.Vagrantfile 文件的目的有两个: 设置项目的根目录.Vagrant 中的许多配置选项是相对于这个根目录的. ...
- Mac获取Jenkins管理员初始密码
前言 最近在配置jenkins环境,但是启动jenkins后,进入jenkins解锁页时,需要自己获取初始密码. 尝试在访达中输入地址搜索,结果无该文件.后来百度上查看多篇文章后,终于获取到了初始密码 ...
- php优化方法
代码优化是开发程序和网站必不可少的一步,代码优化好了,可以大大增加程序的运行效率.使网站或程序加载反应更快.用户体验也就会更好.下面就为大家总结了50条PHP代码优化技巧. 1. 用单引号代替双引号来 ...
- Lua中C API栈操作
向栈中压入数据: lua_pushnil(lua_State*); lua_pushboolean(lua_State*, bool); lua_pushnumber(lua_State*, lua_ ...
- 解决Linux下Svn检出Windows SVN服务器上项目SSL handshake failed: SSL error: Key usage violation in certificate has been detected.
在Linux上检出windows SVN服务器上项目时出现了SSL handshake failed: SSL error: Key usage violation in certificate ha ...
- Helm教程
1.概述 Helm是k8s的包管理工具,类似Linux系统常用的 apt.yum等包管理工具. 使用helm可以简化k8s应用部署 2.基本概念 Chart:一个 Helm 包,其中包含了运行一个应用 ...
- C++ STL常见数据结构(容器)分类
vector:(连续的空间存储,可以使用[]操作符)快速的访问随机的元素,快速的在末尾插入元素,但是在序列中间的插入,删除元素要慢,而且如果一开始分配的空间不够的话,可能重新分配更大空间,拷贝的性能开 ...
- 没有找到mspdb80.dll,因此这个应用程序未能启动...问题解决
这里主要针对使用link.exe进行SIG文件制作时,报错. 首先下载,mspdb80.dll:https://www.lanzous.com/i59dgfi 将dll文件移动到我的电脑(32位)C: ...
- Vue打包后访问静态资源路径问题
Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run buil ...
- C中对整数的大端对齐与小端对齐的理解
示例 /* 大端与小端对齐 说明: 1.对于arm, intel这种x86架构的复杂指令cpu,整数在内存中是 倒着存放的,低地址放低位,高地址放高位,称之为小端对齐 2.对于linux服务器的cpu ...