1209表格

表格

表格也是用一组标签来描述：
table,thead,tbody,tr,td/th
所有的数据必须填充到td/th中
th是td的plus+，自带了一个加租和居中样式

    <table class="">
        <!-- 表格标题 -->
        <caption>商品信息表</caption>
        <!-- 表头 -->
        <thead>
            <!-- 没添加一组表格数据,必须先添加一行 -->
            <tr>
                <th>ID</th>
                <th>品名</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <!-- 表格的主体,一个表格可以右多个主体,但只能有一个表头 -->
        <tbody>
            <!-- tobody浏览器自动生成,但是代码必须写,否则js取值可能出错 -->
            <tr>
                <td>a100</td>
                <td>手机</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
            <tr>
                <td>a100</td>
                <td>电脑</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
            <tr>
                <td>a100</td>
                <td>电话</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
            <tr>
                <td>a100</td>
                <td>相机</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>b1</td>
                <td>手机</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
            <tr>
                <td>b2</td>
                <td>电脑</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
            <tr>
                <td>b3</td>
                <td>电话</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
            <tr>
                <td>b4</td>
                <td>相机</td>
                <td>999</td>
                <td>部</td>
                <td>1</td>
                <td>999</td>
            </tr>
        </tbody>
    </table>
    <!-- 分页 -->
    <p class="page">
        <a href="">首页</a>
        <a href="">...</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">尾页</a>
    </p>

效果图

行与列的合并

colspan：合并行
rowspan:合并列

<table border="1">
        <caption>合肥市第三十六小学课程表</caption>
        <thead>
            <tr>
                <!-- 合并行 -->
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- 合并列  -->
                <td rowspan="4" bgcolor="#ccc">上午</td>
                <td>1</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>2</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>3</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>4</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <th colspan="9" bgcolor="#ccc">中午休息</th>
            </tr>
            <tr>
                <!-- 合并列  -->
                <td rowspan="3" bgcolor="#ccc">下午</td>
                <td>5</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>6</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>7</td>
                <td colspan="8" bgcolor="#ccc">课外活动：各班自行组织自愿参加</td>
            </tr>
        </tbody>
    </table>

效果图