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

    目录

    一、表格标签

    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>

  • 相关阅读:
    C++编译期反射实践——以AOP实现为例
    学习SpringSecurity这一篇就够了
    数字安全实操AG网址漏洞扫描原理与技术手段分析
    VS Code 中使用Git实践，学会了效率翻倍！
    时间滑动窗口限制请求次数
    KY191 矩阵幂（用Java实现）
    创意电子学-小知识：电容器
    Java多线程篇(7)——AQS之共享锁（Semaphore、CountDownLatch）
    vue3 route和router的区别以及如何传参数接受参数，如何像vue2一样使用$route和$router详解
    url到页面渲染完成发生了啥
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126392473