HTML表格（table）属性--左右（colspan）、上下（rowspan）合并、合并边框、位置部分内容

在这里插入图片描述

<h4> <font color="red">border-collapse: collapse; ( 合并边框)

<h4> <font color="red"> rowspan=”2”; (上下合并)

<h4> <font color="red"> colspan=”2”;（左右合并）

<html>
    <head>
        <meta charset="utf-8">
        <title>商务风格表格的设计与实现</title>
        <style>
            /*设置表格总体样式*/
            #recruit {
                width: 100%;
                border-collapse: collapse;/* 为表格设置合并边框模型： */
                text-align: left;
            }
            /*设置单元格样式*/
            #recruit td,
            #recruit th {
                /* font-size: 1em;*/
                border: 1px solid orange;
                padding: 7px;
            }
            /*设置标题单元格样式*/
            #recruit th {
                background-color: orange;
                color: #ffffff;
            }
            /*设置单元行样式*/
            #recruit tr.orange {
                background-color: #FFEDDB
            }
        </style>
    </head>
    <body>
        <h3>商务风格表格的设计与实现</h3>
        <hr />
        <table id="recruit" border="1">
            <caption>招聘信息表</caption>
            <tr>
                <th>地点</th>
                <th>招聘职位</th>
                <th>公司</th>
            </tr>
            <tr>
                <td>全国</td>
                <td>产品培训生</td>
                <td>腾讯</td>
            </tr>
            <tr class="orange" >
                <td colspan="2">全国(左右合并colspan="2")</td>
                <td>前端开发工程师</td>
                <td>阿里巴巴</td>
            </tr>
            <tr >
                <td>上海</td>
                <td>交互设计师</td>
                <td>网易游戏</td>
            </tr>
            <tr class="orange" >
                <td>北京</td>
                <td>视觉设计师</td>
                <td>360</td>
            </tr>
            <tr >
                <td rowspan="2">深圳（上下合并rowspan="2"）</td>
                <td>数据分析师</td>
                <td>IBM</td>
            </tr>
            <tr class="orange">
                <td>杭州</td>
                <td>数据研发工程师</td>
                <td>微软</td>
            </tr>
        </table>
    </body>
</html>

<h4> <font color="red">border-spacing

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。

             border-collapse:separate;    /* 默认样式 */
              border-spacing:10px 50px;

在这里插入图片描述

HTML表格（table）属性--左右（colspan）、上下（rowspan）合并、合并边框、位置 部分内容

相关文章