HTML table 直列化格式详解

时间：2021-05-08

直列化格式

<colgroup>...</colgroup>

属性名称 属性值 说明

align left 靠左
center 靠中
right 靠右
valign top 靠上
middle 靠中
bottom 靠下
span 数字 直列数

bgcolor 颜色 背景颜色

个别直列设置

格式:<col>功能完全和<colgroup>一样

<!--注意设置第一行的DOCTYPE为xhtml会导致colgroup失效-->

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <htmlxmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <title>表格的直列化格式</title>
  • </head>
  • <body>
  • <tablecellpadding="5px"cellspacing="0px"border="1px"bordercolor="black">
  • <!--说明：用两组colgroup标签来控制整个第三列显示为红色
  • 第一组colgroup中的span="2"相当于一个占位符，这样第三列(数学这一整列)就会显示为红色
  • 同理，如果设置span="3",则第四列(英语这一整列)会显示为红色
  • <colgroupspan="2"></colgroup>
  • <colgroupbgcolor="red"></colgroup>
  • -->
  • <!--<col>功能完全和<colgroup>一样
  • 设置<col>标签达到和<colgroup>一样的功能
  • 这里加了一个align="right"单独设置第三列(数学这一整列)右对齐
  • -->
  • <colspan="2"/>
  • <colbgcolor="red"align="right"/>
  • <captionalign="left">学生成绩表</caption>
  • <tr>
  • <th>姓名</th>
  • <th>语文</th>
  • <th>数学</th>
  • <th>英语</th>
  • </tr>
  • <tr>
  • <td>张三</td>
  • <td>90</td>
  • <td>89</td>
  • <td>99</td>
  • </tr>
  • <tr>
  • <td>李四</td>
  • <td>98</td>
  • <td>92</td>
  • <td>96</td>
  • </tr>
  • <tr>
  • <td>王五</td>
  • <td>92</td>
  • <td>97</td>
  • <td>91</td>
  • </tr>
  • <tr>
  • <td>总分</td>
  • <td>200</td>
  • <td>200</td>
  • <td>200</td>
  • </tr>
  • </table>
  • </body>
  • </html>

    • 以上就是小编为大家带来的HTML table 直列化格式详解的全部内容了，希望对大家有所帮助，多多支持~

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章