使用HTML的table标签编写细线表格

最新推荐文章于 2024-11-13 09:38:08 发布

小小怪下士_---_

最新推荐文章于 2024-11-13 09:38:08 发布

阅读量1k

点赞数 15

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/2301_77451378/article/details/139667447

版权

HTML中如何编写细线表格table

在html中表格是使用<table>标签定义的。表格主要有表头<th>，行<tr>，单元格<td>组成。

<table>标签相当于一个容器，里面有若干行<tr>。每行又由若干单元格<td>组成。
<table>标签常用属性有cellspacing属性表示单元格与单元格之间的间距，cellpadding属性表示单元格内内容与边框的间距。

当我们设置border="1"时表格(<table>)的样子是这样的：
只有边框的表格

很多时候我们需要的是细线表格

编写细线表格的步骤为：1、给<table>标签添加样式

 table {

    width: 560px;

    background-color: #000000;

    border: 0;

    text-align: center;

  }

2、给<tr>标签添加背景样式

tr {

    background-color: #fff;

  }

3、在<table>标签内加上cellspacing=“1” align=“center” cellpadding=“0”，

<table cellspacing="1" align="center" cellpadding="0"></table>

细线表格的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        width: 560px;
        background-color: #000000;
        border: 0;
        text-align: center;
    }
    tr {
        background-color: #fff;
    }
</style>
<body>
    <table cellspacing="1" align="center" cellpadding="0">
        <thead>
            <tr>
                <td colspan="2">日期</td>
                <td colspan="2">天气现象</td>
                <td>气温</td>
                <td>风向</td>
                <td>风力</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">13日星期一</td>
                <td>白天</td>
                <td><img src="./img/11.png" alt=""></td>
                <td>晴间转多云</td>
                <td>高温7℃</td>
                <td>无持续风向</td>
                <td>微风</td>
            </tr>
            <tr>
                <td>夜间</td>
                <td><img src="./img/12.png" alt=""></td>
                <td>晴</td>
                <td>低温-4℃</td>
                <td>无持续风向</td>
                <td>微风</td>
            </tr>
            <tr>
                <td rowspan="2">14日星期二</td>
                <td>白天</td>
                <td><img src="./img/11.png" alt=""></td>
                <td>晴</td>
                <td>高温9℃</td>
                <td>无持续风向</td>
                <td>微风</td>
            </tr>
            <tr>
                <td>夜间</td>
                <td><img src="./img/13.png" alt=""></td>
                <td>阴</td>
                <td>低温-4℃</td>
                <td>无持续风向</td>
                <td>微风</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果如下所示：
细线表格