【丛林】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图片) 压缩( ...
随机推荐
- Jmeter接口自动化培训
课程前提 速成班,讲的不会非常深,每个人基础不一样,但是实现接口自动化没有问题,因为jmeter更多的用来做性能测试.当然有兴趣我们也可以穿插一点 课程基本大纲 接口基础概念 部署本地测试环境(使用d ...
- mybatise根据list参数查询
where id in<foreach item="item" index="index" collection="map.idList&quo ...
- docker hub 本地镜像登录
docker的登录信息存放在home目录下的.docker文件夹下,查看 cat ~/.docker/config.json { "auths": { "gcyimgs. ...
- [Linux] 003 分区
1. 磁盘分区 使用分区编辑器再磁盘上划分几个逻辑部分 不用类的目录与文件可以存储进不同的分区 2. 分区类型 主分区 最多只能有 4 个 扩展分区 最多只能有 1 个 主分区加扩展分区最多为 4 个 ...
- 函数异步模拟实现ajax
//模拟ajax function getData(callback){ setTimeout(function(){ var name='leo' callback(name) },1000) re ...
- Dubbo源码学习总结系列二 dubbo-rpc远程调用模块
dubbo本质是一个RPC框架,我们首先讨论这个骨干中的骨干,dubbo-rpc模块. 主要讨论一下几部分内容: 一.此模块在dubbo整体框架中的作用: 二.此模块需要完成的需求功能点及接口定义: ...
- SELECT INTO - 从一个查询的结果中创建一个新表
SYNOPSIS SELECT [ ALL | DISTINCT [ ON ( expression [, ...] ) ] ] * | expression [ AS output_name ] [ ...
- 最强大的Android线程池框架
背景 大家都知道在我们的开发中永远都离不开多线程,对于我们为什么要使用多线程,多线程的使用和多线程的一些基础知识这里我们就不讲了,有兴趣的朋友可以去看一下博主之前的几篇文章: 线程你真的了解它吗 这才 ...
- lambda表达式以及stream流式api用法
https://www.cnblogs.com/aoeiuv/p/5911692.html 这篇文章讲的简单全面,记录下 kotlin一些符号的用法 https://www.cnblogs.com/l ...
- 判断是否为PC
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", " ...