小白教程
所有教程
关于
Search
172.70.131.154
172.70.131.154
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML表格colgroup”的源代码
本页内容
上一节:
HTML表格样式
下一节:
HTML列表
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|28]] ''' <nowiki><colgroup></nowiki> '''元素用于设置表格的特定列的样式。 == HTML 表格组合 == 如果要设置表格的某些列的样式,请使用''' <nowiki><colgroup></nowiki> ''' and''' <nowiki><col></nowiki> ''' 元素。 该''' <nowiki><colgroup></nowiki> '''元素应用作列规范的容器。 每个组都用一个''' <nowiki><col></nowiki> '''元素指定。 该''' <nowiki>span</nowiki> '''属性指定获取样式的列数。 该''' <nowiki>style</nowiki> '''属性指定了列的样式。 注意:colgroups的合法 CSS 属性选择非常有限。 <sample title="" hererun="s" desc="" > <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>Colgroup</h2> <p>Add the a colgroup with a col element that spans over two columns to define a style for the two columns:</p> <table style="width: 100%;"> <colgroup> <col span="2" style="background-color: #D6EEEE"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> </body> </html> </sample> 注意:标签''' <nowiki><colgroup></nowiki> '''必须是元素的子''' <nowiki><table></nowiki> '''元素,并且应该放置在任何其他表格元素之前,如''' <nowiki><thead></nowiki> '''、 ''' <nowiki><tr></nowiki> '''等''' <nowiki><td></nowiki> ''' ,但''' <nowiki><caption></nowiki> '''如果存在,则在元素之后。 == 合法的 CSS 属性 == 仅允许在 colgroup 中使用的 CSS 属性的选择非常有限: ''' <nowiki>width</nowiki> '''属性 ''' <nowiki>visibility</nowiki> '''属性 ''' <nowiki>background</nowiki> '''属性 ''' <nowiki>border</nowiki> '''_ 所有其他 CSS 属性都不会影响到您的表格。 == 多列元素 == 如果您想用不同样式设置更多列的样式, ''' <nowiki><col></nowiki> '''请在 : 中使用更多元素 ''' <nowiki><colgroup></nowiki> ''': <sample title="" hererun="s" desc="" > <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>Multiple Col Elements</h2> <p>Add multiple col elements in the colgroup:</p> <table style="width: 100%;"> <colgroup> <col span="2" style="background-color: #D6EEEE"> <col span="3" style="background-color: pink"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> </body> </html> </sample> == 空 Colgroups == 如果要对表格中间的列进行 ''' <nowiki><col></nowiki> '''样式设置,请为之前的列插入一个“空”元素(没有样式): <sample title="" hererun="s" desc="" > <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>Empty Colgroups</h2> <p>Add "empty" col elements that represents the columns before the columns you want to style:</p> <table style="width: 100%;"> <colgroup> <col span="3"> <col span="2" style="background-color: pink"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> </body> </html> </sample> ==隐藏列== 您可以使用以下属性隐藏列''' <nowiki>visibility: collapse</nowiki> ''': <sample title="" hererun="s" desc="" > <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>Hide Columns</h2> <p>You can hide specific columns with the visibility property:</p> <table style="width: 100%;"> <colgroup> <col span="2"> <col span="3" style="visibility: collapse"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> <p><b>Note:</b> The table columns does not collapse properly in Safari browsers.</p> </body> </html> </sample>
返回至“
HTML表格colgroup
”。
上一节:
HTML表格样式
下一节:
HTML列表