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

定义和用法

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. Bootstrap 学习笔记4 巨幕页头略缩图警告框

  2. Python 学习笔记18 异常处理

    我们在编码的过程中,难免会遇到一些错误和异常, 这时候程序会异常退出,并且会抛出错误信息: 比如: print(1/0) ''' 输出: Traceback (most recent call las ...

  3. 【Python—参数】*arg与**kwargs参数的用法

    在python中,这两个是python中的可变参数,*arg表示任意多个无名参数,类型为tuple;**kwargs表示关键字参数,为dict. # *允许你传入0个或任意个参数,这些可变参数在函数调 ...

  4. Little Sub and Mr.Potato's Math Problem (构造法)

    题目传送门Little Sub and Mr.Potato's Math Problem Time Limit: 2 Seconds      Memory Limit: 65536 KB Littl ...

  5. java 日期工具

    package com.neuxa.is.workflow.utils; import java.sql.Timestamp;import java.text.DateFormat;import ja ...

  6. JS面向对象——动态原型模型、寄生构造模型

    动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑.动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情 ...

  7. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  8. 卷积神经网络CNN原理以及TensorFlow实现

    在知乎上看到一段介绍卷积神经网络的文章,感觉讲的特别直观明了,我整理了一下.首先介绍原理部分. [透析] 卷积神经网络CNN究竟是怎样一步一步工作的? 通过一个图像分类问题介绍卷积神经网络是如何工作的 ...

  9. 【转载】windows 开启 nginx 监听80 端口 以及 禁用 http 服务后,无法重启 HTTP 服务,提示 系统错误 123,文件目录、卷标出错

    https://www.cnblogs.com/TianyuSu/p/9509873.html location / { proxy_set_header Host $Host; proxy_set_ ...

  10. 【记录】微信emoji表情存入数据库

    最近遇到一个问题,在微信授权获取用户信息的时候,由于微信昵称(nickName)是表情,无法存入数据库. 查其原因,原来是因为数据库的编码格式不正确,我的是utf-8 改成utf8mb4就可以了. 其 ...