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

定义和用法

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. Vagrant 入门 - 项目设置

    原文地址 配置 Vagrant 项目的第一步是创建 Vagrantfile 文件.Vagrantfile 文件的目的有两个: 设置项目的根目录.Vagrant 中的许多配置选项是相对于这个根目录的. ...

  2. Mac获取Jenkins管理员初始密码

    前言 最近在配置jenkins环境,但是启动jenkins后,进入jenkins解锁页时,需要自己获取初始密码. 尝试在访达中输入地址搜索,结果无该文件.后来百度上查看多篇文章后,终于获取到了初始密码 ...

  3. php优化方法

    代码优化是开发程序和网站必不可少的一步,代码优化好了,可以大大增加程序的运行效率.使网站或程序加载反应更快.用户体验也就会更好.下面就为大家总结了50条PHP代码优化技巧. 1. 用单引号代替双引号来 ...

  4. Lua中C API栈操作

    向栈中压入数据: lua_pushnil(lua_State*); lua_pushboolean(lua_State*, bool); lua_pushnumber(lua_State*, lua_ ...

  5. 解决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 ...

  6. Helm教程

    1.概述 Helm是k8s的包管理工具,类似Linux系统常用的 apt.yum等包管理工具. 使用helm可以简化k8s应用部署 2.基本概念 Chart:一个 Helm 包,其中包含了运行一个应用 ...

  7. C++ STL常见数据结构(容器)分类

    vector:(连续的空间存储,可以使用[]操作符)快速的访问随机的元素,快速的在末尾插入元素,但是在序列中间的插入,删除元素要慢,而且如果一开始分配的空间不够的话,可能重新分配更大空间,拷贝的性能开 ...

  8. 没有找到mspdb80.dll,因此这个应用程序未能启动...问题解决

    这里主要针对使用link.exe进行SIG文件制作时,报错. 首先下载,mspdb80.dll:https://www.lanzous.com/i59dgfi 将dll文件移动到我的电脑(32位)C: ...

  9. Vue打包后访问静态资源路径问题

    Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run buil ...

  10. C中对整数的大端对齐与小端对齐的理解

    示例 /* 大端与小端对齐 说明: 1.对于arm, intel这种x86架构的复杂指令cpu,整数在内存中是 倒着存放的,低地址放低位,高地址放高位,称之为小端对齐 2.对于linux服务器的cpu ...