706 html、css之表格table：细线表格，单元格的合并

表格

常用元素

table的常用属性

tr、th、td的常用属性

细线表格的实现

其他元素

合并单元格

CSS属性 - border-spacing

04_表格_表格的基本使用.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- 【在html的元素属性值中，px单位可以省略。】 -->
    <table border="1" cellpadding="10" cellspacing="5" width="800" height="400" align="center">
      <tr valign="center" align="center">
        <td valign="bottom" align="right" width="200">内容1</td>

        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
      </tr>
      <tr valign="bottom">
        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
        <td>内容1</td>
      </tr>
    </table>
  </body>
</html>

05_表格_实现细线表格.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

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

      table {
        /* 1.边框的宽度 2.实线/虚线 3.边框的颜色 */
        border: 1px solid #666;

        /* 重点: 将边框合并 【border-collapse给table加。】 */
        border-collapse: collapse;

        /* table的居中显示 */
        margin: 20px auto;
      }

      table tr:first-child {
        font-weight: 700;
      }

      td {
        border: 1px solid #666;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <!-- table>(tr>td{单元格$}*5)*3 -->
    <h2>影院电影放映列表</h2>
    <table>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
    </table>
  </body>
</html>

06_表格_表格中其他元素.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      table {
        /* 1.边框的宽度 2.实线/虚线 3.边框的颜色 */
        border: 1px solid #666;

        /* 重点: 将边框合并 */
        border-collapse: collapse;

        /* table的居中显示 */
        margin: 20px auto;
      }

      caption {
        font-weight: 700;
        font-size: 25px;

        /* 增加底部的外边距 */
        margin-bottom: 20px;
      }

      td,
      th {
        border: 1px solid #666;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- table>(tr>td{单元格$}*5)*3 -->
    <!-- <h2>影院电影放映列表</h2> -->
    <table>
      <caption>
        影院电影放映列表
      </caption>
      <thead>
        <tr>
          <th>单元格1</th>
          <th>单元格2</th>
          <th>单元格3</th>
          <th>单元格4</th>
          <th>单元格5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
          <td>单元格4</td>
          <td>单元格5</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
          <td>单元格4</td>
          <td>单元格5</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>页脚1</td>
          <td>页脚2</td>
          <td>页脚3</td>
          <td>页脚4</td>
          <td>页脚5</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

07_表格_单元格合并基本使用.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      table {
        border-collapse: collapse;

        margin: 0 auto;
      }

      td {
        border: 1px solid skyblue;
        padding: 20px;

        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- column: 列 -->
    <!-- row: 行 -->

    <table>
      <tr>
        <td colspan="2">单元格1</td>
        <!-- <td>单元格2</td> -->
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td rowspan="2">单元格3</td>
        <td rowspan="2" colspan="2">单元格4</td>
        <!-- <td>单元格5</td> -->
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <!-- <td>单元格3</td> -->
        <!-- <td>单元格4</td> -->
        <!-- <td>单元格5</td> -->
      </tr>
    </table>
  </body>
</html>

08_表格_单元格合并的练习.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;

        margin: 0 auto;
      }

      td {
        border: 1px solid skyblue;

        /* 第一个值上下的值 第二值左右的值 */
        padding: 6px 25px;

        text-align: center;
      }

      [colspan],
      [rowspan],
      tr:nth-child(2) {
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="6">课程表</td>
      </tr>
      <tr class="week">
        <td></td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
      </tr>
      <tr>
        <td rowspan="4">上午</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>音乐</td>
        <td>音乐</td>
        <td>音乐</td>
        <td>音乐</td>
        <td>音乐</td>
      </tr>
      <tr>
        <td rowspan="4">下午</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>音乐</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>
    </table>
  </body>
</html>

09_表格_单元格之间的间距.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      table {
        border-spacing: 10px 15px;
        /* border-collapse: collapse; */
      }

      table,
      td {
        border: 1px solid skyblue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
    </table>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      table {
        border-spacing: 10px 15px;
        /* border-collapse: collapse; */
      }

      table,
      td {
        border: 1px solid skyblue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
      <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
      </tr>
    </table>
  </body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jianjie/p/15125547.html