本文详细探讨了CSS中的表格元素，包括caption、summary、thead、tbody、tfoot、th、td、col、colgroup等元素的使用。同时讲解了表格的表框模型，如border-collapse属性和border-spacing的影响。此外，还介绍了如何通过border-color创建表格的凹凸视觉效果。接着，文章转向了表单的部分，但未展开具体细节。
表格
1. 元素
- <caption> 表格的标题
- <summary>
- 逻辑部分：thead、tbody、tfoot
thead、tfoot在一个table中唯一。
th-用于thead
th标签的scope属性：scope=“col”将表头与所在列关联起来
td-表示数据data
- col、colgroup
对整列或者列组应用样式，在tabel中，需要保持col的数量与实际表格统一。
2. 表格表框模型
border-collapse：seperate/collapse（边框合并成一条）
还需要注意的是：table的自带样式-border-spacing，当在separate下时，不为0.
<!DOCTYPE html>
<html>
<head>
<title>表格——日历的样式</title>
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<table>
<caption><a href="#"><</a>January<a href="#">></a></caption>
<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" >Thu</th>
<th scope="col" >Fri</th>
<th scope="col" >Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pre">30</td>
<td class="pre">31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="next">1</td>
<td class="next">2</td>
</tr>
</tbody>
</table>
</body>
</html>table{
border-spacing: 0;
color: #333;
}
caption{
font-weight: bold;
margin: none;
}
caption a{
float:left;
text-decoration: none;
color: #000;
}
caption a:last-child{
float: right;
}
caption,thead{
background-color: #eee;
padding: 5px;
}
thead tr th{
width:40px;
}
tbody td{
text-align: center;
border-collapse: separate;
border-top:1px solid #eff;
border-left:1px solid #eff;
border-right:1px solid gray;
border-bottom: 1px solid gray;
cursor: pointer;
}
td:hover{
background-color: gray;
color: white;
border-left-color: black;
border-top-color: black;
}
.pre,.next{
background-color: #eee;
color: gray;
cursor:auto;
}3. 学到的tricks
- 凹凸效果：用border-color来实现，凹——top/left颜色较深，凸——right/bottom颜色较深
当然前提条件是表格边框属性是separate。
表单
1. filedset自带样式：border，可以管理分区的表单
2. label元素
将光标样式改为pointer，表明标签可交互。
- 原来一直使用label的for属性，for的是表单的id！！
- 还可以嵌套使用
<label>labelText<input type="text" id="name></label>
4. 如果有需要隐藏label的情况，为了方便屏幕阅读器的访问，将label通过负的text-indent或者定位到屏幕左侧以外去。
5. 提交表单
- input 类型submit（但是IE老版本不支持属性选择器，所以设置样式非常不方便）
- button标签
关闭默认样式：border、background
6. 设置表单提示信息
扫一扫
9727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
