• 表格、表格样式与长表格

    目录

    一、表格标签

    1、主体标签（table）

    2、行标签（tr）

    3、列标签（td）

    4、行列合并

    二、表格样式属性

    1、边界

    2、边界间隔

    3、边距重叠

    4、文字居中

    5、元素居中

    三、长表格

    1、区域划分

    2、th标签

    四、代码实例

    1、表格

    2、表格样式

    3、长表格

    一、表格标签

    1、主体标签（table）

    只要使用表格，表格附属的所有标签必须在table标签中，也就是table的后代元素        

    2、行标签（tr）

    一个行标签生成一行，但若没有列标签填充就是默认一个行表格

    3、列标签（td）

    列标签是行标签的子标签，必须嵌套在行标签tr中，一个标签就是在行中生成一列

    4、行列合并

    （1）行合并（colspan），里面的参数为合并的个数

    （2）列合并（rowspan），里面的参数同样为合并的个数

    二、表格样式属性

    1、边界

    通过border设置元素边界

    2、边界间隔

    用border-spaceing设置各个边界的距离，大小可以设置为像素

    3、边距重叠

    用border-collapse: collapse;将所有边界重叠，这种方式可以达到excel表格的效果

    4、文字居中

    （1）垂直居中，vertical-align: middle;

    （2）水平居中，text-align: center;

    5、元素居中

    可以将元素的显示方式设置为表格，然后用文字居中的方式设置子元素居中效果，例如

    display: table-cell;

    三、长表格

    1、区域划分

    （1）头部（thead）

    （2）中间（tbody）

    （3）结尾（tfoot）

    然后在各类别中使用tr和td设置表格

    注意：在这里，tr是此三类的子元素，但如果不使用区域划分，那么浏览器会自行创建tbody，将所有tr变为子元素，此时tr就是table的后代元素，而不是子元素

    2、th标签

    头部可以用th标签，有居中加粗的效果

    四、代码实例

    1、表格

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>表格title>
    8.   head>
    9.   <body>
    10.     <table border="1" width="50%" align="center">
    11.       
    12.       
    13.       <tr>
    14.         <td>1td>
    15.         <td>2td>
    16.         
    17.         <td colspan="2">3td>
    18.       tr>
    19.       <tr>
    20.         <td>5td>
    21.         <td>6td>
    22.         <td>7td>
    23.         <td>8td>
    24.       tr>
    25.       <tr>
    26.         <td>9td>
    27.         <td>10td>
    28.         <td>11td>
    29.         
    30.         <td rowspan="2">12td>
    31.       tr>
    32.       <tr>
    33.         <td>13td>
    34.         <td>14td>
    35.         <td>15td>
    36.       tr>
    37.     table>
    38.   body>
    39. html>

    2、表格样式

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>表格样式title>
    8.     
    9.     <style>
    10.       table {
    11.         width: 50%;
    12.         border: 1px solid black;
    13.         /* 
    14.         border-spacing用于设置两边距的间隔
    15.         */
    16.         /* 
    17.         border-collapse: collapse; 
    18.         用于取消边距，使之重叠
    19.         */
    20.         border-collapse: collapse;
    21.       }
    22.       td {
    23.         border: 1px solid black;
    24.         height: 50px;
    25.         /* 上下左右文字居中 */
    26.         text-align: center;
    27.         vertical-align: top;
    28.       }
    29.       tr:nth-child(odd) {
    30.         background-color: #bfa;
    31.       }
    32.       .box1 {
    33.         height: 400px;
    34.         width: 400px;
    35.         background-color: red;
    36.         /* 可通过设置display转换为表格从而用文本设置方式居中元素 */
    37.         display: table-cell;
    38.         text-align: center;
    39.         vertical-align: middle;
    40.       }
    41.       .box2 {
    42.         height: 100px;
    43.         width: 100px;
    44.         background-color: yellow;
    45.         margin: 0px auto;
    46.       }
    47.     style>
    48.   head>
    49.   <body>
    50.     <div class="box1">
    51.       <div class="box2">div>
    52.     div>
    53.  
    54.     <table>
    55.       <tr>
    56.         <td>学号td>
    57.         <td>性别td>
    58.         <td>年龄td>
    59.         <td>姓名td>
    60.       tr>
    61.       <tr>
    62.         <td>1td>
    63.         <td>男td>
    64.         <td>18td>
    65.         <td>孙悟空td>
    66.       tr>
    67.       <tr>
    68.         <td>2td>
    69.         <td>女td>
    70.         <td>18td>
    71.         <td>猪八戒td>
    72.       tr>
    73.       <tr>
    74.         <td>3td>
    75.         <td>男td>
    76.         <td>18td>
    77.         <td>沙和尚td>
    78.       tr>
    79.       <tr>
    80.         <td>3td>
    81.         <td>男td>
    82.         <td>18td>
    83.         <td>沙和尚td>
    84.       tr>
    85.       <tr>
    86.         <td>3td>
    87.         <td>男td>
    88.         <td>18td>
    89.         <td>沙和尚td>
    90.       tr>
    91.       <tr>
    92.         <td>3td>
    93.         <td>男td>
    94.         <td>18td>
    95.         <td>沙和尚td>
    96.       tr>
    97.       <tr>
    98.         <td>3td>
    99.         <td>男td>
    100.         <td>18td>
    101.         <td>沙和尚td>
    102.       tr>
    103.     table>
    104.   body>
    105. html>

    3、长表格

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>长表格title>
    8.   head>
    9.   <body>
    10.     <table border="1" align="center" width="50%">
    11.         
    12.       <thead>
    13.         <th>日期th>
    14.         <th>收入th>
    15.         <th>支出th>
    16.         <th>合计th>
    17.       thead>
    18.       <tbody>
    19.         <tr>
    20.           <td>2022.1.1td>
    21.           <td>500td>
    22.           <td>300td>
    23.           <td>200td>
    24.         tr>
    25.         <tr>
    26.           <td>2022.1.1td>
    27.           <td>500td>
    28.           <td>300td>
    29.           <td>200td>
    30.         tr>
    31.         <tr>
    32.           <td>2022.1.1td>
    33.           <td>500td>
    34.           <td>300td>
    35.           <td>200td>
    36.         tr>
    37.         <tr>
    38.           <td>2022.1.1td>
    39.           <td>500td>
    40.           <td>300td>
    41.           <td>200td>
    42.         tr>
    43.       tbody>
    44.       <tfoot>
    45.         <tr>
    46.           <td>td>
    47.           <td>td>
    48.           <td>合计td>
    49.           <td>800td>
    50.         tr>
    51.       tfoot>
    52.     table>
    53.   body>
    54. html>

  • 相关阅读:
    AWS 疑难问题——ECS传递环境变量给C#应用程序
    计算材料学学习记录2
    Spring注解详解：@ComponentScan自动扫描组件使用
    云原生：从基本概念到实践，解析演进与现状
    microk8s 报错tls: failed to verify certificate: x509:
    【无标题】
    第六章《凸优化核心过程:真正搞懂梯度下降过程》
    Docker镜像操作、容器操作、数据卷及挂载数据卷
    多数据源配置代码
    数据化管理洞悉零售及电子商务运营——电子商务中的数据化管理
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126392473