美文网首页
HTML表格-第一二章基础表格

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

作者: 博尔茨杰 | 来源:发表于2019-02-22 17:05 被阅读0次
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>中

相关文章