table

最新推荐文章于 2022-06-29 16:03:35 发布

richest_qi

最新推荐文章于 2022-06-29 16:03:35 发布

阅读量162

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/107242707

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

样例

<body>
    <table>
        <thead>
            <tr>
                <th>城市</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>深圳</td>
                <td>前端工程师</td>
            </tr>
            <tr>
                <td>杭州</td>
                <td>人民警察</td>            
            </tr>
            <tr>
                <td>杭州</td>
                <td>人民教师</td>            
            </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

1、原始表格

在这里插入图片描述

2、给`<table>`加边框

在这里插入图片描述

3、给`<th>`加边框

在这里插入图片描述

4、给`<td>`加边框

在这里插入图片描述

5、 `<table>`的`border-spacing`变大点儿

在这里插入图片描述

6、 `<table>`的`border-spacing`再大点儿

在这里插入图片描述

7、`<table>` 的`border-collapse:collapse`一招制敌，`border-spacing`再大也没用

在这里插入图片描述

原始表格的用户代理样式如下：

 /* user agent stylesheet */
        table{
            display:table;
            border-collapse:separate;
            border-spacing:2px;
            border-color:grey;
            box-sizing:border-box;
        }

border-collapse
边框分开还是合并
border-collaps:separate，边框分开；
border-collapse:collapse，边框合并。
border-spacing
边框间隙，仅在border-collapse:separate时有效。
如，border-spacing:50px，边框水平间隙、垂直间隙都是50px；
border-spacing:50px 10px，边框水平间隙是50px，垂直间隙是10px。

表格操作

<body>
<script>
    var table = document.createElement("table");

    var thead = document.createElement('thead');
    var tr = document.createElement("tr"); 
    var th = document.createElement('th');
    th.appendChild(document.createTextNode("城市"));
    tr.appendChild(th);

    th = document.createElement('th');
    th.appendChild(document.createTextNode("职业"));
    tr.appendChild(th);

    thead.appendChild(tr);
    table.appendChild(thead);
    
    
    var tbody = document.createElement('tbody');
    tr = document.createElement("tr");
    var td = document.createElement("td");
    td.appendChild(document.createTextNode("深圳"));
    tr.appendChild(td);

    td = document.createElement("td");
    td.appendChild(document.createTextNode("前端工程师"));
    tr.appendChild(td);

    tbody.appendChild(tr);
    table.appendChild(tbody);

    document.body.appendChild(table);
</script>
</body>

<body>
<script>
    var table = document.createElement("table");
    
    var thead = table.createTHead();
    var tr = thead.insertRow(0);
    var th = document.createElement("th");
    th.appendChild(document.createTextNode("城市"));
    tr.appendChild(th);
    
    th = document.createElement("th");
    th.appendChild(document.createTextNode("职业"));
    tr.appendChild(th);
    
    table.appendChild(thead);


    var tbody = table.createTBody();
    tr = tbody.insertRow(0);
    var td = tr.insertCell(0);
    td.appendChild(document.createTextNode("深圳"));

    td = tr.insertCell(1);
    td.appendChild(document.createTextNode("前端工程师"));

    table.appendChild(tbody);

    document.body.appendChild(table);
</script>
</body>

table.createTHead()
生成<thead></thead>
table.createTBody()
生成<tbody></tbody>
thead.insertRow(index)/tbody.insertRow(index)
生成<tr></tr>
tr.insertCell(index)
生成<td></td>
table.rows
thead.rows
tbody.rows
colspan
单元格横跨多列
比如， colspan='3'，所在单元格横跨3列。
<td colspan='3'>第一组</td>
<td colspan='3'>第二组</td>

    <style>
    table{
        border-collapse:collapse;
    }
    tbody tr {
        border-top:1px solid grey;
    }
    tbody tr:last-child{
        border-bottom:1px solid grey;
    }
    tbody td{
        padding-right:15px;
    }
    </style>

<body>
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>城市</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- <td colspan='3'>第一组</td> -->
            <td>第一组</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>深圳</td>
            <td>前端工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>杭州</td>
            <td>人民警察</td>
        </tr>
        <tr>
            <!-- <td colspan='3'>第二组</td> -->
            <td>第二组</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>深圳</td>
            <td>人民教师</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>南昌</td>
            <td>医生</td>
        </tr>
    </tbody>
</table>
</body>