博客列表 >列表的调用及注意事项

列表的调用及注意事项

昊森
昊森原创
2023年01月17日 18:13:47352浏览

html列表调用示例

列表

  • 列表分为标题、表头、表身和表尾

  • 表单需要包裹在<table></table>标签中,可以理解为创建一个表单

  • 接下来是表格标题<caption></caption>标签内可以声明表格标题

  • 表头<thead></thead>标签内为tr>th默认加粗居中对齐可以更好的起到声明的作用

  • 表身<tfoot></tfoot>标签内为tr>td声明表格内的内容

  • 表尾<tbody></tbody>内的标签和表身相同,起到声明结尾的作用

    实际应用


    执行样式

    1. <!-- 列表的使用方法 -->

    2. <!-- 创建一个列表文件,设置边框为1,宽度为600,文字居中对齐 -->

    3. <table border="1" width="600" style="text-align: center">

    4. <!-- 设置列表标题 -->

    5. <caption>

    6.  某年级某班课程表

    7. </caption>

    8. <!-- 表头部分 -->

    9. <thead>

    10.  <!-- 表头使用tr>th{星期$}*7快速创建 -->

    11.  <tr>

    12.    <th width="80">课程\星期</th>

    13.    <th>星期1</th>

    14.    <th>星期2</th>

    15.    <th>星期3</th>

    16.    <th>星期4</th>

    17.    <th>星期5</th>

    18.    <th>星期6</th>

    19.    <th>星期7</th>

    20.  </tr>

    21. </thead>

    22. <!-- 表身 -->

    23. <tbody>

    24.  <!-- 表身使用tr*10>td{语文}*7快速创建 -->

    25.  <tr>

    26.    <!-- 设置表格第一列第一行为向下合并5列,显示上午的课程 -->

    27.    <td rowspan="5">上午</td>

    28.    <td>语文</td>

    29.    <td>语文</td>

    30.    <td>语文</td>

    31.    <td>语文</td>

    32.    <td>语文</td>

    33.    <td>语文</td>

    34.    <td>语文</td>

    35.  </tr>

    36.  <tr>

    37.    <!-- 设置格第二行的第二列和第三列合并 -->

    38.    <td colspan="2">数学</td>

    39.    <!-- 合并之后,这个数据就属于多余数据,删除即可 -->

    40.    <!-- <td>语文</td> -->

    41.    <td>语文</td>

    42.    <td>语文</td>

    43.    <td>语文</td>

    44.    <td>语文</td>

    45.    <td>语文</td>

    46.  </tr>

    47.  <tr>

    48.    <td>语文</td>

    49.    <td>语文</td>

    50.    <td>语文</td>

    51.    <td>语文</td>

    52.    <td>语文</td>

    53.    <td>语文</td>

    54.    <td>语文</td>

    55.  </tr>

    56.  <tr>

    57.    <td>语文</td>

    58.    <td>语文</td>

    59.    <td>语文</td>

    60.    <td>语文</td>

    61.    <td>语文</td>

    62.    <td>语文</td>

    63.    <td>语文</td>

    64.  </tr>

    65.  <tr>

    66.    <td>语文</td>

    67.    <td>语文</td>

    68.    <td>语文</td>

    69.    <td>语文</td>

    70.    <td>语文</td>

    71.    <td>语文</td>

    72.    <td>语文</td>

    73.  </tr>

    74.  <tr>

    75.    <td rowspan="5">下午</td>

    76.    <td>语文</td>

    77.    <td>语文</td>

    78.    <td>语文</td>

    79.    <td>语文</td>

    80.    <td>语文</td>

    81.    <td>语文</td>

    82.    <td>语文</td>

    83.  </tr>

    84.  <tr>

    85.    <td>语文</td>

    86.    <td colspan="2">体育</td>

    87.    <!-- <td>语文</td> -->

    88.    <td>语文</td>

    89.    <td>语文</td>

    90.    <td>语文</td>

    91.    <td>语文</td>

    92.  </tr>

    93.  <tr>

    94.    <td>语文</td>

    95.    <td>语文</td>

    96.    <td>语文</td>

    97.    <td>语文</td>

    98.    <td>语文</td>

    99.    <td>语文</td>

    100.    <td>语文</td>

    101.  </tr>

    102.  <tr>

    103.    <td>语文</td>

    104.    <td>语文</td>

    105.    <td>语文</td>

    106.    <td>语文</td>

    107.    <td>语文</td>

    108.    <td>语文</td>

    109.    <td>语文</td>

    110.  </tr>

    111.  <tr>

    112.    <td>语文</td>

    113.    <td>语文</td>

    114.    <td>语文</td>

    115.    <td>语文</td>

    116.    <td>语文</td>

    117.    <td>语文</td>

    118.    <td>语文</td>

    119.  </tr>

    120. </tbody>

    121. </table>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议