程序员进阶之路06-HTML中的body属性及表格标签，收藏

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容：这是HTML课程的第六课，在这节课程中主要讲解一下HTML中body的属性，以及表格元素。希望大家根据这个教程可以学习一下。

上节回顾

在上节中主要讲解了超链接和图片的知识点。上节请戳->网页前端开发基础教程05-网页中插入图片和超链接，界面更绚丽

当然讲解的并不是很全面，只是把常用的HTML属性进行讲解了出来，在后期会进行做项目，到时候，直接回顾一下，马上就能搞懂了。这次直接讲解一下HTML中的body属性以及表格元素。

PS：其实HTML这个东西很简单，只需要根据对应的元素，学会标签指的是什么就可以了，就和谍战片中中的密码本一样，按照密码本书写对应的格式，写上去就能直接显示了。只是学会这种标签的样式而已。自己学习HTML也是可以的。最重要的还是进行实践。

body的属性

body是整个页面的主体元素，我们把内容写入到body元素中，那应该如何设置主体的背景颜色、背景图片呢？

下面就一一来讲解一下。使用Sublime创建一个HTML文件。

设置背景颜色，属性为bgcolor，值为RGB颜色或者颜色的英文单词。

2.背景图片设置，背景图片照样可以用路径的方式写入到HTML文件中。属性为background例如：

当然body的属性值，比较少，而且几乎不太用，在以后的时候要使用CSS代替这些东西。

表格

表格在网页中还是很常用的，比如在按照每行数据进行展示的时候，就需要用到表格啦。所以就需要学习一下表格应该如何写。

OK，我们先建立一个最简单的学生信息表：

其中table（表格）、tr（一行）、（一个单元格）。这三个时表格最基本的元素。并依次有个上下级嵌套的关系。

表格中的属性

表格中有很多属性，正是因为有了这些属性，才让表格无比强大。比如在老早的时候，风靡一时的Hao123就是使用表格进行制作的。OK在下节中咱们也会自己制作一个模仿的Hao123第一版，通过table制作。

border

border是边框的意思，在以后的学习中你肯定会对这个单词不陌生，因为这个单词真的是太常用了。border有两个值分别为0和1.0表示“没有边框”，1表示“有边框”。

cellpadding:

这个表示的是表格的内边距，也就是表格的边框到里面的内容的距离。

数值越大，单元格的表框到内容的距离越大。

cellspacing

这是单元格和单元格之间的距离，这个值越大，单元格之间的距离越大。

align：

align表示的是单元格的对齐方式，对里面的内容进行水平的对齐，其值有三个分别为right（右）、center（居中）、left（左）。

colspan、rowspan：

这是两个属性，分别表示行的合并和列的合并。其值为数字，表示要合并的单元格：

还有其他几个属性例如：valign、bgcolor、width、height等在前课程中也讲过了。

每天一个知识点，带你迈向软件编程大神，一起努力吧。下节课程，我们一起做一个Hao123的导航页面。

们在设计网站的时候，有时候为了体现出别具一格的风格，往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。

在CSS中，没有某一个属性能够直接实现倾斜的背景颜色，而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div，给这个div设定一个背景颜色，然后让这个div倾斜一个角度，从而实现倾斜的背景颜色。比如像下图所示的案例：

那么下面就来用一个基本的实例来解释并实现倾斜背景的效果：

首先要说明一下，页面导航条是固定在页面顶部的，导航条不会随着页面的滚动而移动。这个效果的实现非常简单，就是利用了 position 这个属性的 fixed 值来实现的。

我下面的代码实例中，HTML用来给页面上添加元素，而在 CSS 部分需要精细化的设定属性的参数值，而且需要若干个HTML标签的CSS来配合，从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的，大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

为了让导航条和其他元素都能够与页面的两边留出距离，我在实际内容标签的外围又包裹了一层div，主要在这个包裹的div里设定左右内间距，从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"。

在实际内容的排列时，我采用了更加方便灵活的弹性布局，这样会相对的减少HTML和CSS的代码量。

另外，如果想要实现倾斜的背景颜色，那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单，只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可，但是我们可以想象一下，原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度（-9deg）后，它会变成一个平行四边形，这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。

在大家阅读 CSS 的代码之前，我给出一个原理图来解释一下其中的原理：

当外围的 div 倾斜了之后，就需要把内容部分的div的上部的内间距增大，以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。

那么页面底部也同样需要实现这样倾斜背景颜色的设计，这样才能将风格一致，产生美感。原理还是这个原理图所示的逻辑，不同的地方在于，底部最外围的 div 不倾斜，而是需要两个属性，height 和 overflow-y，并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示，这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉，从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜，而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线，下部是横线，只有上部是斜线的带有背景颜色的四边形，这个四边形里面是实际的页面内容。

最终的样子在这篇 CSS 代码的最后展示出来了。

CSS

例

一个简单的 HTML 表格，包含两列两行：

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

浏览器支持

所有主流浏览器都支持 <tr> 标签。

标签定义及使用说明

<tr> 标签定义 HTML 表格中的行。

一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不支持 <tr> 标签在 HTML 4.01 中的任何属性。

属性

属性	值	描述
align	rightleftcenterjustifychar	HTML5 不支持。定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色。
char	character	HTML5 不支持。规定根据哪个字符来进行文本对齐。
charoff	number	HTML5 不支持。规定第一个对齐字符的偏移量。
valign	topmiddlebottombaseline	HTML5 不支持。规定表格行中内容的垂直对齐方式。

全局属性

<tr> 标签支持 HTML 的全局属性。

事件属性

<tr> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：“图片滑动样式”修改HTML教程
下一篇：不用jQuery也能拖拽排序的新Get：SortableJs

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

程序员进阶之路06-HTML中的body属性及表格标签，收藏

HTML

CSS

您的项目需求