使用table标签制作常用的html表格

最新推荐文章于 2024-09-19 20:12:50 发布

_Ataraxia

最新推荐文章于 2024-09-19 20:12:50 发布

阅读量3.2k

点赞数

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/dreamintheworld/article/details/78539286

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

table 标签用于定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

合并单元格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    body{
        text-align: center;
    }

    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        height: 100px;
        border-width: 1px; /*外边框粗细  */
        border-collapse: collapse; /* 合并边框  border一定要存在且不为零 */
    }
</style>

<body>
    <p>Table Demo</p>
    <div class="table-class">
        <table width="400" border="1px">
            <tr><td width="105">站名</td><td width="181">网址</td><td width="112">说明</td></tr>
            <tr><td>BAIDU</td><td>www.baidu.com</td><td>搜索</td></tr>
        </table>
    </div>
</body>
</html>

这种方式有个不好的地方就是需要设置边框颜色时候无法设置

给table的边框设置颜色属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    body{
        text-align: center;
    }
    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        border-collapse: collapse;
    }
    .table-class td{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        height: 50px;
        border:3px #FF0000 solid;
    }
</style>

<body>
<div class="table-class">
    <table width="400" border="0" cellspacing="0" cellpadding="0">
        <tr><td>站名</td><td>网址</td><td>说明</td></tr>
        <tr><td>BAIDU</td><td>www.baidu.com</td><td>搜索</td></tr>
    </table>
</div>
</body>
</html>

使用th(table header)标签添加表头以及使用css的类选择器给对应的单元格添加背景色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    body{
        text-align: center;
    }

    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        border-collapse: collapse;
    }

    .table-class td, th{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 30%;
        height: 50px;
        border:3px #FF0000 solid;
    }

    .color_gray{
        background-color: #d7d7d7;
    }
</style>

<body>
<div class="table-class">
    <table width="400" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <th class="color_gray">站名</th>
            <th>网址</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>BAIDU</td>
            <td class="color_gray">www.baidu.com</td>
            <td>搜索</td>
        </tr>
    </table>
</div>

</body>
</html>

在单元格中加入其它控件并铺满单元格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    body{
        text-align: center;
    }
    .table-class table{
        margin: 0px auto;/* table在页面的居中属性*/
        width: 50%;
        border-collapse: collapse;
    }
    .table-class td{
        margin: 0px auto;/* table在页面的居中属性*/
        height: 50px;
        border:1px #000000 solid;
    }
    .cell{
        margin: 0px auto;
        height: 100%;
        width : 100%;
        border:0px;
    }
    .cellbutton{
        margin: 0px auto;
        height: 100%;
        width : 100%;
    }

    .select_style{
        width: 100%;
        height:100%;
        font-size:20px;
    }
</style>

<body>
<div class="table-class">
    <table width="400" border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td>测试1</td>
                <td>测试2</td>
                <td>测试3</td>
                <td style="width:200px">测试4</td>
                <td style="width:200px">测试5</td>
                <td>保存</td>
                <td>删除</td>
        </tr>
        <tr><td>1</td><td>2</td><td>1</td>
        <td><input name="textAlarm12" type="text" class="cell"></input></td>
        <td>
                <select name="textSameTimeCall1" class="select_style">
                <option value=""></option><option value="1">开启</option><option value="0">关闭</option>
                </select>
        </td>
        <td><button name="buttonSave" type="button" class="cellbutton">保存</button></td>
        <td><button name="buttonDel" type="button" class="cellbutton">删除</button></td></tr>
    </table>
</div>
</body>
</html>