文档章节

HTML表格

Carbenson
 Carbenson
发布于 2017/07/06 15:50
字数 316
阅读 5
收藏 0
点赞 0
评论 0
<table block=“1px”>
	<tbody><tr>
		<th>First Name</th>
		<th>Last Name</th>		
		<th>Points</th>
	</tr>
	<tr>
		<td>Jill</td>
		<td>Smith</td>		
		<td>50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td>		
		<td>94</td>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>		
		<td>80</td>
	</tr>
	<tr>
		<td>Adam</td>
		<td>Johnson</td>		
		<td>67</td>
	</tr>
</tbody></table>

tr表示一行,tbody表示表格本体,th表示标题行所在的列,效果

字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

跨行两行

<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

效果:

跨两列

<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

效果:

带标题

<table> 
<caption>Monthly savings</caption>
</table>

表格内间距(单元格内容与其边框之间的空白)

<table border="1" cellpadding="10">

表格单元格间距(增加单元格之间的距离)

<table border="1" cellspacing="10">

进阶

css

table {
    border-collapse: collapse;//重叠边线
}
//文本居中,高度为30px,边线1px,字为黑色
table, th, td {
    text-align: center;
    height: 30px;
    line-height: 30px;
    border: 1px solid #E2E9EE;
    color: #000000;
}
//单数行为浅粉色
tr:nth-child(odd) {
    background: #FBFCFD;
}

 

 

© 著作权归作者所有

共有 人打赏支持
Carbenson
粉丝 13
博文 228
码字总数 70091
作品 0
广州
程序员
HTML/CSS/JavaScript学习笔记【持续更新】

HTML 标签 定义和用法 规定文本的字体、字体尺寸、字体颜色。 实例 规定文本字体、大小和颜色: 1 This is some text!2 This is some text!3 This is some text! HTML 与 XHTML 之...

angel_kitty
2017/09/03
0
0
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.3K
10
jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

晨曦之光
2012/03/09
293
0
28个有用的表格插件推荐

OSCHINA曾发布过文章“18个最好的 jQuery 表格插件”,今天再提供一份表格插件的长名单。 28个表格插件,列表如下: Table Sorter Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的...

小卒过河
2011/07/01
4.1K
9
表格响应式布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="table-resp......

kitty1116
03/12
0
0
Html中的table包括 caption、col、colgroup、thead、tfoot 以及 tbody

HTML <table> 标签 定义和用法 <table> 标签定义 HTML 表格。 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行,th 元素定义表头,td 元素定义表格...

随智阔
2013/02/27
0
0
18个最好的 jQuery 表格插件

我们一般使用HTML表格来显示数据,我们都知道div更容易设计,更灵活。但是现在你使用这些精彩的jQuery表格插件,将更简单、灵活、更多风格。 本篇文章介绍了18个非常不错的jQuery 表格插件,...

老枪
2011/04/06
76.5K
7
一周一章前端书·第13周:《HTML与CSS进阶教程》S01E02

第2章 语义化 2.1 语义化简介 HTML的精髓在于标签的语义。大部分标签都有它自身的语义,比如标签,表示paragraph,一个段落;,表示header level 1,一级标题。 前端的三大核心技术HTML、CSS...

梁同学de自言自语
01/13
0
0
CSS中display属性知识要点详解

今天,再来给大家介绍下display的相关知识,同时也涉及到css3 中display相关知识,感兴趣的朋友一起学习吧! display默认值:inline display其它值及对应的说明: none:隐藏对象。与visibil...

罗马教堂的钟声
2015/12/25
60
0
Bootstrap 基础表格(Tables)和样式CSS

标准结构 标签 描述 用以包装表格化的数据 容纳表格标题行 ()以标识表格列, 容纳表格行 () 容纳行内的一组单元格 ( or ) 默认的表格单元格 用于列头(或是行,取决于标签所在位置和区域)的特...

提广乾
2014/06/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
9分钟前
0
0
Android应用Context详解及源码解析

Android应用Context详解及源码解析 本文定位:优质文章收集 本文转载 1 背景 今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android的Context到底是啥的问题,所以就马...

lichuangnk
40分钟前
0
0
PostgreSQL的昨天今天和明天

PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS), 也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统。有些特性甚至连商业数据库都不具备。 这个起源于伯克利(...

闻术苑
45分钟前
0
0
Mysql对自增主键ID进行重新排序

1,删除原有主键: ALTER TABLE `table_name` DROP `id`; 2,添加新主键字段: ALTER TABLE `table_name` ADD `id` MEDIUMINT( 8 ) NOT NULL FIRST; 3,设置新主键: ALTER TABLE `table_nam......

niithub
50分钟前
0
0
福利篇:免费csdn vip账号分享

分享一个发布免费csdn vip账号的网站:啰嗦vip www.lostvip.com , 各种软件开发类的视频教程:慕课网、动脑学院、黑马各大培训机构VIP视频教程,非常不错!

在水一方发盐人
57分钟前
0
0
Nginx+Tomcat搭建高性能负载均衡集群

一、 工具   nginx-1.8.0   apache-tomcat-6.0.33 二、 目标   实现高性能负载均衡的Tomcat集群:    三、 步骤   1、首先下载Nginx,要下载稳定版:      2、然后解压两个Tom...

码代码的小司机
58分钟前
0
0
Centos7编译安装ntp-4.2.8p11

Centos7编译安装ntp-4.2.8p11 背景 因公司做等保评级,在进行安全漏洞检测时发现ntp需要升级到ntp-4.2.7p25以上版本,经过一番搜索,没有该版本及新版本ntp的yum安装包,所以只能编译安装了,...

阿dai
今天
0
0
antd pro 新增模块的步骤

index.js是整个项目的入口文件。 // 1. Initializeconst app = dva({ history: createHistory(),});// 2. Pluginsapp.use(createLoading());// 3. Register global modelapp.model......

灯下草虫鸣_
今天
0
0
Cisco VPN在win10下报Error 56的解决办法

问题描述 Cisco VPN在win10下报Error 56: The Cisco Systems, Inc. VPN Service has not been started 解决方案 方案一:在计算机管理-》服务 查看Cisco Systems, Inc. VPN Service服务是否存...

chenfj_fer
今天
0
0
Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部