此例子已经包含本文大部分内容,请对照参考。查看代码 》

定义和用法

table标签定义 HTML 表格。

创建表格的四要素:tabletrthtd

<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 表格浅谈(边框、隔行变色的更多相关文章

  1. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  2. 隔行变色---bai

    <!DOCTYPE html> <html> <style> .mousein { background-color:blue; cursor: pointer; ...

  3. 浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  4. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. table表格设置边框线为单实线

    设置table表格边框为单实线的方法有两种 第一种方法就是利用table标签cellspacing=0属性来实现,cellspacing是内边框和外边框的距离,这种方法实现的看起来是单实线,其实是内边 ...

  6. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  7. table 表格 细边框 最简单样式

    table 表格细边框的效果实现方法虽然不难,但网上简单有效的方法却很少,在此记录一下 css 样式 /** table 细边框 **/ table{border-collapse: collapse ...

  8. BootStrap的table表格,栅格系统,form表单的样式

    BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用B ...

  9. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

随机推荐

  1. 学习HTML5 全局属性 accesskey-title

    属性classcontextmenu指定一个元素的上下文菜单.当用户右击该元素,出现上下文菜单dirdropzone指定是否将数据复制,移动,或链接,或删除idspellcheck检测元素是否拼写错误 ...

  2. Java IO(2)

    关于流的概念 Java 由流来完成具体的IO操作,虽然面对的是不同的外设(网络.鼠标.键盘)IO流使用与全部的外设,在底层Java已经将具体与物理设备交互的细节都处理好了. 流的分类: 从功能上 输入 ...

  3. 爬虫(五)—— 解析库(二)beautiful soup解析库

    目录 解析库--beautiful soup 一.BeautifulSoup简介 二.安装模块 三.Beautiful Soup的基本使用 四.Beautiful Soup查找元素 1.查找文本.属性 ...

  4. Jmeter中Bean shell脚本格式修改为utf-8

    遇到的问题: 在做 一个发贴的接口测试时发现,发送数字+纯字母贴子时,可以正常请求成功.但当贴内容为中文时,服务端编码为乱码??. 原因: jmeter中,shell脚本的默认的格式为GBK,所以我在 ...

  5. 【题解】Intervals

    题目大意   有\(n\)个区间(\(1 \leq n \leq 200\)),第\(i\)个区间覆盖\((a_{i}, b_{i})\)且有权值\(w_{i}\)(\(1 \leq a_{i} &l ...

  6. 从“中产梦”中醒来,好好打工吧

    "中产"定义 自打"中产阶级/阶层"概念出现,总有人试图给出定义.搞不清何为"中产"却试图定义"中产阶级/阶层",注定是 ...

  7. JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL。 语法: window.history.back();

    返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 比如,返回前一个浏览的页面,代码如下: window.hi ...

  8. txt_to_csv

    import csv def txt2csv(inf, outf): with open(inf,'r') as fin, open(outf,'w',newline='') as fout: wrt ...

  9. 解释ARP协议和RARP协议

    解释ARP(地址解析协议) 首先,每个主机都会在自己的ARP缓冲区中建立一个ARP列表,以表示IP地址和MAC地址之间的对应关系. 当源主机要发送数据时,首先检查ARP列表中是否有对应IP地址的目的主 ...

  10. 2019西北工业大学程序设计创新实践基地春季选拔赛 D(卢卡斯定理)

    链接:https://ac.nowcoder.com/acm/contest/553/D来源:牛客网 Chino with Equation 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C ...