DIVCSS 第十三章 CSS 构造表格

[复制链接]
ARCHY明星会员实名认证 发表于 2012-10-27 10:19:18 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
table在网页制作中也是经常用到的,常见的论坛的帖子列表或者帖子内容页都是使用的table布局来构造的,html的第4章也讲过表格table基本格式和使用方法,没有看过的可以写看看,然后继续今天的内容。

1、简单表格
  1. table {width:auto;border-collapse:collapse;margin-left:20px;border:1px solid black;}
  2. td,th {width:50px;border:1px solid black;padding:5px;background:gold;text-align:center;vertical-align:middle;text-indent:5px;}
  3. <table>
  4. <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
  5. <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  6. </table>
  7. <table>
  8. <tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
  9. <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  10. </table>
复制代码
这个就是一个简单的表格,上面的CSS的代码,下面是html代码。

2、行组和列组
  1. table.example1 thead {background:orange;color:black;}
  2. table.example1 tbody {background:gold;color:black;}
  3. table.example1 tfoot {background:firebrick;color:white;}
  4. *.col1 {background:wheat;}
  5. *.col2 {background:gold;}
  6. *.col3 {background:orange;}
  7. *.col4 {background:tomato;}
  8. *.col5 {background:firebrick;}
  9. *.col6 {background:black;color:white;}
  10. <table class="example1">
  11. <thead>
  12. <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
  13. </thead>
  14. <tbody>
  15. <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  16. </tbody>
  17. <tfoot>
  18. <tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
  19. </tfoot>
  20. </table>
  21. <table>
  22. <colgroup>
  23. <col class="col1" />
  24. <col class="col2" />
  25. <col class="col3" />
  26. <col class="col4" />
  27. <col class="col5" />
  28. <col class="col6" />
  29. </colgroup>
  30. <tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
  31. <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  32. </table>
复制代码
3、表格选择符
  1. <table class="example1">
  2. <thead>
  3. <tr>
  4. <th class="t1">1</th>
  5. <th class="t2">2</th>
  6. <th>3</th>
  7. <th>4</th>
  8. <th>5</th>
  9. <th>6</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  14. </tbody>
  15. <tfoot>
  16. <tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
  17. </tfoot>
  18. </table>
复制代码
4、分隔的边框
  1. table {border-collapse:separate;}
  2. td,th {width:50px;padding:5px;text-align:center;vertical-align:middle;background:gold;text-indent:5px;}
  3. .boxed-table {border:1px solid black;}
  4. .boxed-cells td {border:1px solid black;}
  5. .boxed-cells td.x {border:none;}
  6. <h2>封装的表格</h2>
  7. <table class="boxed-table" cellspacing="5">
  8. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  9. <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td
  10. class="x">11</td></tr>
  11. </table>
  12. <h2>封装的单元格</h2>
  13. <table class="boxed-cells" cellspacing="5">
  14. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  15. <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td
  16. class="x">11</td></tr>
  17. </table>
  18. <h2>封装的单元格和表格</h2>
  19. <table class="boxed-table boxed-cells" cellspacing="5">
  20. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  21. <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td
  22. class="x">11</td></tr>
  23. </table>
复制代码
5、重复的边框
  1. table {border-collapse:collapse;}
  2. td,th {width:50px;padding:5px;text-align:center;vertical-align:middle;background:gold;text-indent:5px;}
  3. .boxed-table {border:1px solid black;}
  4. .boxed-cells td {border:1px solid black;}
  5. .boxed-cells td.x {border:none;}
  6. <h2>封装的表格</h2>
  7. <table class="boxed-table" cellspacing="0">
  8. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  9. <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td
  10. class="x">11</td></tr>
  11. </table>
  12. <h2>封装的单元格</h2>
  13. <table class="boxed-cells" cellspacing="0">
  14. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  15. <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td
  16. class="x">11</td></tr>
  17. </table>
  18. <h2>封装的单元格和表格</h2>
  19. <table class="boxed-table boxed-cells" cellspacing="0">
  20. <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
  21. <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td
  22. class="x">11</td></tr>
  23. </table>
复制代码
6、隐藏和删除单元格、行、列
  1. table {border-collapse:separate;}
  2. td,th {width:50px;padding:5px;text-align:center;vertical-align:middle;background:gold;text-indent:5px;border:1px solid black;}
  3. .hidden {visibility:hidden;}
  4. .delete {display:none;}
  5. <table>
  6. <colgroup>
  7. <col class="hidden delete" />
  8. </colgroup>
  9. <tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr>
  10. <tr>
  11. <td class="hidden">5</td>
  12. <td class="hidden">6</td>
  13. <td>7</td>
  14. <td>8</td>
  15. </tr>
  16. </table>
复制代码
在实际制作中尽量避免使用隐藏,因为可能隐藏代码会给seo优化方面带来一些负面影响,同时也会增加页面代码。临时做调试测试可以使用。

7. 垂直对齐数据
  1. .x {vertical-align:middle;}
复制代码
第十二章 CSS 构造超链接

15天学习DIV+CSS教程汇总导读




上一篇:第十二章 CSS 构造超链接
下一篇:第十四章 CSS 构造表单

大神点评7

wacwc 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
努力~~各位。。。  
slxfw 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
声明一下:本人看贴和回贴的规则,好贴必看,精华贴必回。  
富计庙 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
…没我说话的余地…飘走  
期待、黎明 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
留个脚印```````  
jingjinxin 发表于 2012-12-15 10:45:13 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
干嘛把 发表于 2014-6-16 15:24:30 [DIVCSS] 显示全部楼层
估计你是没见识过~` 呵呵
新闻代发、企业站代运营,加QQ:3221474327
青岛青菜 发表于 2016-11-12 10:20:45 [DIVCSS] 显示全部楼层
在努力中!!!
http://jbk.dcpfb.com
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表