博客列表 >前端样式之表格的2种形式

前端样式之表格的2种形式

Dz
Dz原创
2020年07月17日 22:21:553056浏览

表格的第一种形式:table标签

  • 前端开发中可以使用<table></table>标签制作表格,table标签内包含的标签元素如下:

    • <caption> 定义表格标题,标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
    • <thead> 用于表格的表头内容。
    • <tbody> 用于表格的主体内容。
    • <tfoot> 定义表格的页脚(脚注或表注)
    • <tr> 定义表格中的行。
    • <th> 定义表格内的表头单元格。
    • <td> 定义表格中的标准单元格。
    • <colgroup> 用于对表格中的列进行组合,以便对其进行格式化。
    • <col> 为表格中一个或多个列定义属性值。
  • 实例:

    1. <table>
    2. <!-- 表格的标题 -->
    3. <caption>
    4. 表格的标题
    5. </caption>
    6. <colgroup>
    7. <col width="30" />
    8. <col width="70" />
    9. <col width="100" />
    10. </colgroup>
    11. <!-- 头部 -->
    12. <thead>
    13. <tr>
    14. <th>ID</th>
    15. <th>姓名</th>
    16. <th>联系方式</th>
    17. </tr>
    18. </thead>
    19. <!-- 主体: 允许有多个 -->
    20. <tbody>
    21. <tr>
    22. <td>1</td>
    23. <td>张三</td>
    24. <td>13555555555</td>
    25. </tr>
    26. <tr>
    27. <td>2</td>
    28. <td>李四</td>
    29. <td>1388888888</td>
    30. </tr>
    31. </tbody>
    32. <tbody>
    33. <tr>
    34. <td>1</td>
    35. <td>张三</td>
    36. <td>13555555555</td>
    37. </tr>
    38. <tr>
    39. <td>2</td>
    40. <td>李四</td>
    41. <td>1388888888</td>
    42. </tr>
    43. </tbody>
    44. <!-- 底部 -->
    45. <tfoot>
    46. <tr>
    47. <td>X</td>
    48. <td>X</td>
    49. <td>X</td>
    50. </tr>
    51. </tfoot>
    52. </table>

表格的第二种形式:类属性

  • 前端开发中任何标签元素都可以通过类属性display: table转化成表格形式,display的其他属性值包括:

    • table-caption 此元素会作为一个表格标题显示(类似 <caption>)
    • table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    • table-row 此元素会作为一个表格行显示(类似 <tr>)。
    • table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    • table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    • table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    • table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    • table-column 此元素会作为一个单元格列显示(类似 <col>)
  • 实例:

    1. <style>
    2. /* 表格 */
    3. .table {
    4. display: table;
    5. width: 300px;
    6. text-align: center;
    7. }
    8. /* 标题 */
    9. .table-caption {
    10. display: table-caption;
    11. }
    12. /* 表头 */
    13. .table-thead {
    14. display: table-header-group;
    15. }
    16. /* 行 */
    17. .table-row {
    18. display: table-row;
    19. }
    20. /* 列 */
    21. .table-cell {
    22. display: table-cell;
    23. }
    24. /* 主体 */
    25. .table-tbody {
    26. display: table-row-group;
    27. }
    28. /* 底部 */
    29. .table-tfoot {
    30. display: table-footer-group;
    31. }
    32. /* 列分组样式 */
    33. .table-colgroup {
    34. display: table-column-group;
    35. }
    36. .table-colgroup .table-col {
    37. display: table-column;
    38. }
    39. </style>
    40. <!-- 表格:<table> -->
    41. <div class="table">
    42. <!-- 标题 <caption>-->
    43. <div class="table-caption">表格表题</div>
    44. <!-- 列分组<colgroup> -->
    45. <div class="table-colgroup">
    46. <div class="table-col"></div>
    47. <div class="table-col"></div>
    48. <div class="table-col"></div>
    49. </div>
    50. <!-- 表头:<thead> -->
    51. <div class="table-thead">
    52. <!-- 行 -->
    53. <div class="table-row">
    54. <div class="table-cell">ID</div>
    55. <div class="table-cell">姓名</div>
    56. <div class="table-cell">联系方式</div>
    57. </div>
    58. </div>
    59. <!-- 主体 -->
    60. <div class="table-tbody">
    61. <div class="table-row">
    62. <div class="table-cell">1</div>
    63. <div class="table-cell">张三</div>
    64. <div class="table-cell">1355555555</div>
    65. </div>
    66. <div class="table-row">
    67. <div class="table-cell">2</div>
    68. <div class="table-cell">李四</div>
    69. <div class="table-cell">13888888888</div>
    70. </div>
    71. </div>
    72. <!-- 底部<tfoot> -->
    73. <div class="table-tfoot">
    74. <div class="table-row">
    75. <div class="table-cell">X</div>
    76. <div class="table-cell">X</div>
    77. <div class="table-cell">X</div>
    78. </div>
    79. </div>
    80. </div>

总结:

  • table标签制作表格适用于全新制作表格使用,display: table适用于前端页面已经存在很多标签数据的情况下二次开发编写表格。
  • display: table的方式制作的表格更适用于flex或grid布局里垂直居中。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
灭绝师太2020-07-18 15:34:441楼
display:table逐渐被淘汰,可以把布局重心放在flex与grid上面。