首页 > 代码库 > 数据表格应该被完全抛弃吗？
数据表格应该被完全抛弃吗？
有人说，数据表格会使页面变的臃肿不堪，所以应该完全抛弃掉他们，但是，有的时候，表格的用处显然是极大的。HTML提供了许多表格的属性，以做一个日历为例，在这进行总结一下。
- summary和caption.caption指表格标题，summary类似于图片的ALT属性，用于描述表格的内容。
- thead、tbody和tfoot.三个标签可以将表格分成几个逻辑部分，以便于对某一个特殊区域运用特殊样式，一个表格中只可以使用一个thead和tfoot，而可以使用多个tbody。
- col和colgroup，我们知道，行标题和列标题可以用<th>标签进行表示，行标记可以用<tr>，所以可以通过<tr>对整行应用样式，但是很难对整列应用样式，这个时候col和colgroup就派上用处了！他们可以对一个或多个列进行定义和分组。
使用了以上的标签，我们可以先构建出日历的基本轮廓：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>日历制作</title></head><body><table class="cal" summary="A calender"> <caption> <a href="#" rel="prev"><</a>November 2014<a href="#" rel="next">></a> </caption> <colgroup> <col id="sun"/> <col id="mon"/> <col id="tue"/> <col id="wed"/> <col id="thur"/> <col id="fri"/> <col id="sat"/> </colgroup><thead> <tr> <th scope="col">Sun</th> <th scope="col">Mon</th> <th scope="col">Tue</th> <th scope="col">Wed</th> <th scope="col">Tur</th> <th scope="col">Fri</th> <th scope="col">Sat</th> </tr></thead><tbody> <tr> <td class="null">26</td> <td class="null">27</td> <td class="null">28</td> <td class="null">29</td> <td class="null">30</td> <td class="null">31</td> <td><a href="#">1</td> </tr> <tr> <td><a href="#">2</td> <td><a href="#">3</td> <td><a href="#">4</td> <td><a href="#">5</td> <td><a href="#">6</td> <td><a href="#">7</td> <td><a href="#">8</td> </tr> <tr> <td><a href="#">9</td> <td><a href="#">10</td> <td><a href="#">11</td> <td><a href="#">12</td> <td><a href="#">13</td> <td><a href="#">14</td> <td><a href="#">15</td> </tr> <tr> <td><a href="#">16</td> <td><a href="#">17</td> <td><a href="#">18</td> <td><a href="#">19</td> <td><a href="#">20</td> <td><a href="#">21</td> <td><a href="#">22</td> </tr> <tr> <td><a href="#">23</td> <td><a href="#">24</td> <td><a href="#">25</td> <td><a href="#">26</td> <td><a href="#">27</td> <td class="selected"><a href="#">28</td> <td><a href="#">29</td> </tr> <tr> <td><a href="#">30</td> <td class="null">1</td> <td class="null">2</td> <td class="null">3</td> <td class="null">4</td> <td class="null">5</td> <td class="null">6</td> </tr></tbody></table></body></html>
再对其设置样式，表格边框有两个模型，分别是单独的(border-collapse:separate)和叠加的(border-collapse:collapse)。
table.cal{ border-collapse: separate; border-spacing: 0; text-align: center; color: #333;}.cal th,.cal td{ margin: 0; padding: 0; }//对标题添加视觉样式.cal caption{ font-size: 1.25em; padding-top: 0.692em; padding-bottom: 0.692em; background-color: #d4dde6;}.cal caption [rel="prev"]{ float: left; margin-left: 0.2em;}.cal caption [rel="next"]{ float: right; margin-left: 0.2em;}.cal caption a:link,.cal caption a:visited{ text-decoration: none; color: #333; padding: 0 0.2em;}.cal caption a:hover,.cal caption a:active,.cal caption a:focus{ background-color: #6d8ab7;}//对主体部分应用样式.cal thead th{ background-color: #d4dde6; border-bottom: 1px solid #a9bacb; font-size: 0.875em;}.cal tbody{ color: #a4a4a4; text-shadow: 1px 1px 1px white; background-color: #d0d9e2;}.cal tbody td{ border-top: 1px solid #e0e0e1; border-right: 1px solid #9f9fa1; border-bottom: 1px solid #acacad; border-left: 1px solid #dfdfe0;}.cal tbody a{ display: block; text-decoration: none; color: #333; background-color: #c0c8d2; font-weight: bold; padding: 0.385em 0.692em 0.308em 0.692em;}.cal tbody a:hover,.cal tbody a:focus,.cal tbody a:active,.cal tbody .selected a:link,.cal tbody .selected a:visited,.cal tbody .selected a:hover,.cal tbody .selected a:focus,.cal tbody .selected a:active{ background-color: #6d8ab7; color: white; text-shadow: 1px 1px 2px #22456b;}.cal tbody td:hover,.cal tbody td.selected{ border-top: 1px solid #2a3647; border-right: 1px solid #465977; border-bottom: 1px solid #576e92; border-left: 1px solid #466080;}
这样一个漂亮的日历小组件就诞生了~~~注意作者加样式的过程和思路。
数据表格应该被完全抛弃吗？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。