一、创建并设置表格属性

表格是由行、列、单元格三部分组成，使用表格可以排列页面中的文本、图像以及各种对象。

1、表格的基本标记table tr td

table:表格标记
tr:行标记
td:单元格标记

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

2、表格的宽度width、高度height

单位是像素或者百分比

<table width="表格宽度" height="表格高度">

3、表格的标题caption

默认在表格的上方中央显示表格的标题

<caption>表格的标题</caption>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表格</title>
</head>
<body>
<!--

-->
<table border="1">
    <caption>这是一个表格</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

4、表格的表头th

表头是指表格的第一行或第一列等对表格内容的说明，文字样式居中、加粗显示
th包含在tr标记中

<table>
<tr>
<th></th>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表格</title>
</head>
<body>
<!--

-->
<table border="1" width="150" height="150">
    <caption>学生信息</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>

        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
    </tr>
</table>
</body>
</html>

html5表格border HTML5表格制作_css

5、表格的对齐方式align

参数取值：
left：整个表格在浏览器页面中左对齐
center：居中对齐
right：右对齐

6、表格的边框宽度border

默认不显示表格的边框

7、表格的边框颜色bordercolor

前提是设置了边框属性

<table border="宽度" bordercolor="颜色"></table>

8、单元格间距cellspacing

在单元格之间设置一定距离，默认值是2像素

9、单元格边距cellpadding

默认情况下，单元格内的内容会紧贴着表格的边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表格</title>
</head>
<body>
<!--

-->
<table border="1" width="150" height="150" align="center" bordercolor="blue" cellspacing="10" cellpadding="10">
    <caption>学生信息</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>

        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
    </tr>
</table>
</body>
</html>

10、表格的背景色bgcolor

这个属性是针对整个表格的，但可以被行、列或单元格定义的背景颜色覆盖

11、表格的背景图像background

<table background="背景图像地址">

二、表格的结构标记

更清楚地区分表格的结构

1、设计表头样式thead

<thead>
<tr>
<td></td>
</tr>
</thead>

一个表元素只能有一个thead
可以在thead内包含td,th,tr
可以设置背景颜色bgcolor,文字对齐方式align,文字垂直对齐方式valign

2、设计表主体样式tbody

用于统一设计表主体部分的样式，一个表元素只能有一个tbody,其他属性与thead类似

3、设计表尾样式tfoot

与thead,tbody类似

三、综合案例

thead,tbody,tfoot都被一对tr包含
colspan:合并单元格，值是要合并的单元格个数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格综合案例</title>
</head>
<body>
<table width="622" height="150" border="1" bordercolor="green"
       align="center" cellspacing="4" cellpadding="10" bgcolor="#faebd7" >
    <caption>珠宝类型</caption>
    <tr>
        <thead bgcolor="white" align="center">
        <td>珠宝分类</td>
        <td>珠宝颜色</td>
        <td>珠宝价格</td>
        </thead>
    </tr>
    <tr>
        <tbody align="center">
        <td>黄金</td>
        <td>金黄色</td>
        <td>1000</td>

    </tr>
    <tr>
        <td>手镯</td>
        <td>翡翠色</td>
        <td>900</td>
    </tr>
    <tr>
        <td>项链</td>
        <td>银白色</td>
        <td>800</td>

        </tbody>
    </tr>
    <tr>
        <tfoot align="center" bgcolor="#80aba9">
        <td colspan="3">喜欢就购买吧！</td>
        </tfoot>
    </tr>
</table>

</body>
</html>

html5表格border HTML5表格制作_学习_02