小蚂蚁 发表于 2021-9-14 22:16:32

HTML table 直列化格式详解

直列化格式
<colgroup>...</colgroup>
属性名称                                          属性值                            说明
align                                          left                                                 靠左
                                                   center                                             靠中
                                                   right                                             靠右
valign                                       top                                                靠上
                                                middle                                             靠中
                                                bottom                                          靠下
span                                           数字                                                直列数
bgcolor                                    颜色                                                背景颜色
个别直列设置
格式:<col>功能完全和<colgroup>一样
<!--注意设置第一行的DOCTYPE为xhtml会导致colgroup失效-->

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
      
    <html xmlns="https://www.w3.org/1999/xhtml">   
    <head>   
      <title>表格的直列化格式</title>   
    </head>   
    <body>   
      <table cellpadding="5px" cellspacing="0px" border="1px" bordercolor="black">   
            <!--说明:用两组colgroup标签来控制整个第三列显示为红色   
                第一组colgroup中的span="2"相当于一个占位符,这样第三列(数学这一整列)就会显示为红色   
                同理,如果设置span="3",则第四列(英语这一整列)会显示为红色   
                <colgroup span="2"></colgroup>   
                <colgroup bgcolor="red"></colgroup>   
            -->   
            <!--<col>功能完全和<colgroup>一样   
                设置<col>标签达到和<colgroup>一样的功能   
                这里加了一个align="right"单独设置第三列(数学这一整列)右对齐   
            -->   
            <col span="2" />   
            <col bgcolor="red" align="right" />   
            <caption align="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 直列化格式详解的全部内容了,希望对大家有所帮助,多多支持CodeAE代码之家~

https://www.uoften.com/webdesign/xhtml/20180414/68884.html
页: [1]
查看完整版本: HTML table 直列化格式详解