文档章节

HTML表格

Carbenson
 Carbenson
发布于 2017/07/06 15:50
字数 316
阅读 5
收藏 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;
}

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: HTML 列表
下一篇: HTML 图像
Carbenson
粉丝 16
博文 260
码字总数 81948
作品 0
广州
程序员
私信 提问
jQuery 表格插件汇总

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

晨曦之光
2012/03/09
321
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
表格响应式布局

<!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
2018/03/12
0
0
Bootstrap 基础表格(Tables)和样式CSS

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

提广乾
2014/06/18
0
0
jQuery 表格工具集

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

红薯
2010/04/15
9.4K
10

没有更多内容

加载失败,请刷新页面

加载更多

图像库stb_image

https://github.com/nothings/stb 目前一般主流的图像格式也就是bmp,jpg,png,tga,dds,除了DDS一般是给DX用的,虽然一堆OpenGL程序也有用的,但是我一般只用png和tga, png不用说了,带a...

robslove
3分钟前
0
0
Spring 事务提交回滚源码解析

前言 在上篇文章 Spring 事务初始化源码分析 中分析了 Spring 事务初始化的一个过程,当初始化完成后,Spring 是如何去获取事务,当目标方法异常后,又是如何进行回滚的,又或是目标方法执行...

TSMYK
22分钟前
0
0
百度黄埔学院将培养一批首席AI架构师,为“国之重器”赋能

深度学习高端人才不仅是AI发展的重要养分,也是企业转型AI巨大推动力。2019年1月19日,百度黄埔学院——深度学习架构师培养计划在百度科技园举行开学典礼,深度学习技术及应用国家工程实验室...

深度学习之桨
49分钟前
2
0
扒站wget仿站

wget -c -r -p -np -k http://xxx.com/xxx 其中: -c, --continue (断点续传) 接着下载没下载完的文件 -r, --recursive(递归) specify recursive download.(指定递归下载) -p, --page...

临江仙卜算子
51分钟前
2
0
Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部