HTML表格-第一二章基础表格

1.基础语法与结构

<table border="1" width="700">
    <!-- 表格开始 -->
    <!--caption 表格标题居中显示 -->
    <caption>前端工程师平均工资</caption>
    <!--thead，tbody，tfoot 表格头、主体、脚 -->
    <thead>
        <tr>
            <!-- tr 行标签 -->
            <!-- 表格头，内容居中、加粗显示 -->
            <th>城市</th>
            <th>2014年</th>
            <th>2014年</th>
            <th>2015年</th>
            <th>2016年</th>
        </tr>
        <tr>
            <th>城市</th>
            <th>上半年</th>
            <th>下半年</th>
            <th>2015年</th>
            <th>2016年</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>北京</td> <!-- td 单元格 -->
            <td>8000</td>
            <td>9000</td>
            <td>10000</td>
            <td>12000</td>
        </tr>
        <tr>
            <td>上海</td> <!-- td 单元格 -->
            <td>6000</td>
            <td>7000</td>
            <td>8000</td>
            <td>10000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td> <!-- td 单元格 -->
            <td>7000</td>
            <td>8000</td>
            <td>9000</td>
            <td>11000</td>
        </tr>
    </tfoot>
</table> <!-- 表格结束 -->

<table>表格属性

属性	值	描述
Width	Pixels、%	规定表格的宽度
align	Left、center、right	表格相对周围元素的对齐方式
border	pixels	规定表格边框的宽度
Bgcolor	rgb（x,x,x）、#xxxxxx、Colorname	表格的背景颜色
cellpadding	Pixels、%	单元边沿与其内容之间的空白
cellspacing	Pixels、%	单元格之间的空白
frame	属性值	规定外侧边框的哪个部分是可见的
rules	属性值	规定内侧边框的哪个部分是可见的

图片介绍

属性	值	描述
frame	void	不显示外侧边框
△	above	显示上部的外侧边框
△	below	显示下部的外侧边框
△	hsides	显示上部和下部的外侧边框
△	vsides	显示左边和右边的外侧边框
△	lhs	显示左边的外侧边框
△	rhs	显示右边的外侧边框
△	box	在所有四个边上显示外侧边框
△	border	在所有四个边上显示外侧边框

2.<thead>、<tbody>和<tfoot>标签属性

属性	值	描述
align	Left、center、right、justify、char	<thead>、<tbody>和<tfoot>内容的水平对齐
valign	top、middle、bottom、baseline	<thead>、<tbody>和<tfoot>内容的垂直对齐

跨列属性colspan

跨行属性rowspan

3.表格嵌套

表格嵌套必须在<td>中