前端开发：HTML-表格

时间：2018-07-29 16:34:35 阅读：424 评论：0 收藏：0 [点我收藏+]

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<table border="1">
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
    </tr>
</table>

　显示如下：

　技术分享图片

HTML 表格和边框属性

<table border="1">

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>

<table border="1">
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>历史</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>化学</td>
        <td>生物</td>
    </tr>
</table>

　技术分享图片

实例：

没有边框的表格

<table>
     <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>历史</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>化学</td>
        <td>生物</td>
    </tr>
</table>

带有标题的表格

<table border="1">
    <caption>课程表</caption>
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>历史</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>化学</td>
        <td>生物</td>
    </tr>
</table>

单元格合并

<div class="table">
    <table border="1" cellpadding="0">
    <!--表格头-->
        <thead>
        <!--表格行-->
            <tr>
                <th>时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>

        </thead>
        <tbody>
            <!--表格行-->
            <tr>
                <!--跨行合并-->
                <td rowspan="3">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>外语</td>
                <td>历史</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>外语</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>外语</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>外语</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>外语</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
        </tbody>
        <!--表格底部-->
        <tfoot>
            <tr>
                <!--跨列合并-->
                <td colspan="6">课程表</td>
            </tr>
        </tfoot>


</table>

</div>

单元格边距：

<h4>没有单元格边距：</h4>
<table border="1">
    <tr>

        <td>语文</td>
        <td>数学</td>

    </tr>
</table>

<h4>有单元格边距：</h4>
<table border="1" cellpadding="10">
    <tr>

        <td>语文</td>
        <td>数学</td>

    </tr>

HTML 表格标签

技术分享图片

前端开发：HTML-表格

标签：定义居中 mil mic 显示前端 The 列表 class

原文地址：https://www.cnblogs.com/mike-liu/p/9385296.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行