《HTML、CSS、JavaScript 网页制作从入门到精通》——6.5 表格的行属性

简介:

本节书摘来自异步社区《HTML、CSS、JavaScript 网页制作从入门到精通》一书中的第6章,第6.5节,作者:【美】John Resig(莱西格) , Bear Bibeault(贝比奥特) 译者: 徐涛 更多章节内容可以访问云栖社区“异步社区”公众号查看。

6.5 表格的行属性

不仅可以对表格整体设置相关属性,还可以对单独的一行单元格设置相关属性。下面就介绍行的高度、行的边框颜色、行的背景和行里内容的对齐方式设置等。

6.5.1 高度控制height
使用height可以设置行的高度。

语法:
screenshot

举例:
screenshot

在代码中加粗部分的代码标记为设置表格行的高度,在浏览器中预览,可以看到第1行设置了60像素的高度,如图6.16所示。
screenshot

6.5.2 边框颜色bordercolor
可以使用bordercolor属性设置行的边框颜色。

语法:
screenshot

举例:
screenshot

在代码中加粗部分的代码标记为设置表格行的边框颜色,在浏览器中预览可以看到行设置了红色的边框效果,如图6.17所示。
screenshot

6.5.3 行背景bgcolor、background
行的bgcolor或background属性仅作用于当前行。这里设置的bgcolor颜色可以覆盖

语法:
screenshot

说明:

默认设置为透明色,即和文档背景颜色相同。bgcolor颜色值可以为颜色名或16进制等命名方法。background可以选择图像的相对地址,也可以选择绝对地址。

举例:
screenshot

在代码中加粗部分的代码标记为设置表格行的背景,在浏览器中预览可以看到第1行设置了行的背景颜色,如图6.18所示。
screenshot

有的网页中包含了大量的单元格,因此很容易让人眼花缭乱。在网页中适当地使用一些背景颜色,可以让表格变得清晰,如图6.19所示。

screenshot

6.5.4 行文字的水平对齐方式align

语法:

screenshot

举例:
screenshot

在代码中加粗部分的代码标记为设置表格行文字的对齐方式,在浏览器中预览,可以看到第1行文字左对齐、第2行文字水平居中对齐、第3行文字右对齐的效果,如图6.20所示。
screenshot

6.5.5 行文字的垂直对齐方式valign
< tr >的valign属性用来控制表格当前行的垂直对齐方式。垂直对齐方式有3种,分别是top、middle和bottom。

语法:

screenshot

举例:
screenshot

在代码中加粗部分的代码标记为设置表格行文字的对齐方式,在浏览器中预览,可以看到第1行文字顶端对齐,第2行文字居中对齐,第3行文字底部对齐,如图6.21所示。
screenshot

相关文章
|
15天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
20天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
N..
|
1月前
|
前端开发 开发者
HTML表格
HTML表格
N..
11 1
|
5天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
6天前
|
前端开发 UED
CSS cursor的一些相关属性
CSS cursor的一些相关属性
|
8天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
16 0
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
10天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
10天前
|
前端开发
css属性是什么
【4月更文挑战第15天】css属性是什么
13 3
|
17天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css

相关实验场景

更多