文档章节

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;
}

 

 

© 著作权归作者所有

共有 人打赏支持
Carbenson
粉丝 15
博文 235
码字总数 71858
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
55
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
47
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
52
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
54
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部