创建有吸引力且可访问的数据表格
- caption元素: 基本用于表格的标题
- summary属性:可以应用于表格标签,用来描述表格的内容。与图像alt文本类似,summary应该总结表格中的标题
- thead、tbody和tfoot可以将表格划分为几个逻辑部分
- 可以将所有列标题放在thead元素中,这样就能对这个特殊区域单独的应用样式了
- 如果选择使用thead或tfoot元素那必须至少使用一个tbody元素。
- 在一个表格中只能使用一个thead和tfoot元素,但可以使用tbody将复杂的表格划分为及格更容易管理的几部分
- 行标题和列标题应该使用th而不是td标记,但是如果某些内容即使标题又是数据,那么它仍然使用td
- 据现有的测试下来,col和colgroup能发挥作用还能保证兼容的应用就只有俩:width和background。对于width,个人宁愿使用常规方式,第一行设置宽度,保证列宽。对于bacground,一般实际中表格大面积使用不同背景的情况也很少见
- CSS规范有两个表格边盒模型:单独的和叠加的。在单独模型中,在各个单元格周围有边框,而在叠加模型中,单元格共享边框。
- border-collapse: collapse (相邻边合并)
- border-collapse: seperate (边框独立)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Calendar Table | Chapter 7 | CSS Mastery </title>
</head>
<style type="text/css">
<!--
body {
font-family: "myriad pro", arial, helvetica, sans-serif;
font-size:16px;
line-height:1.125em;
}
table.cal {
border-collapse: seperate;
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-right: 0.2em;
}
.cal thead th {
background-color: #d4dde6;
border-bottom: 1px solid #a9bacb;
font-size:0.875em;
}
.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 tbody {
color: #a4a4a4;
text-shadow: 1px 1px 1px white;
background-color: #d0d9e2;
}
.cal tbody td,
.cal tbody td.null:hover {
border-top: 1px solid #e0e0e1;
border-right: 1px solid #9f9fa1;
border-bottom: 1px solid #acacad;
border-left: 1px solid #dfdfe0;
}
.cal tbody tr td:first-child {
border-left: 1px solid #a9bacb;
}
.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;
-webkit-box-shadow: inset 2px 2px 3px #22456b;
-moz-box-shadow: inset 2px 2px 3px #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;
}
-->
</style>
</head>
<body>
<table class="cal" summary="A calandar style date picker" cellspacing="0">
<caption>
<a href="#" rel="prev"><</a> January 2008 <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">Thu</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td class="null">30</td>
<td class="null">31</td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
</tr>
<tr>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
<td class="selected"><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td><a href="#">10</a></td>
<td><a href="#">11</a></td>
<td><a href="#">12</a></td>
</tr>
<tr>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
<td><a href="#">15</a></td>
<td><a href="#">16</a></td>
<td><a href="#">17</a></td>
<td><a href="#">18</a></td>
<td><a href="#">19</a></td>
</tr>
<tr>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
<td><a href="#">22</a></td>
<td><a href="#">23</a></td>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
</tr>
<tr>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
<td><a href="#">29</a></td>
<td><a href="#">30</a></td>
<td><a href="#">31</a></td>
<td class="null">1</td>
<td class="null">2</td>
</tr>
</tbody>
</table>
</body>
</html>
创建简单和复杂的表单布局
- fieldset用来对相关信息块进行分组
- 为了识别每个fieldset的用途,可以使用legend元素。legend元素就像fieldset的标题,它常常在fieldset的顶部垂直居中(使用legend,需要接受不同浏览器之间的差异)
对各种表单元素应用样式
提供可访问的表单反馈
<!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>Advanced Form</title>
<style type="text/css">
<!--
body {
font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
.clear {
clear: both;
}
form {
font-size: 1.4em;
width: 45em;
}
fieldset {
margin: 1em 0;
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
legend {
font-weight: bold;
}
form div {
position: relative;
width: 100%;
padding: 0.4em 0;
clear: both;
}
label {
float: left;
clear: left;
width: 10em;
}
label .required {
font-size: 0.83em;
color:#760000;
}
label .feedback {
position: absolute;
left: 31em;
right: 0;
top: 0.5em;
font-weight: bold;
color:#760000;
padding-left: 20px;
background: url(img/error.png) no-repeat left top;
}
* html .feedback{
width: 10em;
}
input {
width: 20em;
font-size: inherit;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
input:focus, textarea:focus {
background: #ffc;
}
textarea {
width: 100%;
height: 10em;
}
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor .col {
width: 8em;
float: left;
clear: none;
}
#favoriteColor label {
float: none;
}
#remember-me .radio {
margin-right: 1em;
}
button {
width: 200px;
height: 50px;
border: 1px solid #989898;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: url(img/button-bg.png) #c5e063 bottom left repeat-x;
-moz-box-shadow: 2px 2px 2px #ccc;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
color: #fff;
font-size: 26px;
font-weight: bold;
text-shadow: 1px 1px 1px #666;
}
-->
</style>
</head>
<body>
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div>
<label for="email">Email Address is really, really, really really long: <em class="feedback">Incorrect email address. Please try again.</em></label>
<input name="email" id="email" type="text" />
</div>
<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="author">Place of Birth: </label>
<select>
<option value="USA" selected="selected">USA</option>
<option value="UK">United Kingdom</option>
</select>
</div>
<div>
<label for="dateOfBirth">Date of Birth:</label>
<input name="dateOfBirth" id="dateOfBirth" type="text" />
<label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
<select name="monthOfBirth" id="monthOfBirth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
<input name="yearOfBirth" id="yearOfBirth" type="text" />
</div>
<fieldset id="favoriteColor">
<h2>Favorite Color:</h2>
<div class="col">
<div>
<label><input class="checkbox" id="red" name="red" type="checkbox" value="red" />red</label>
</div>
<div>
<label><input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />yellow</label>
</div>
<div>
<label><input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />pink</label>
</div>
<div>
<label><input class="checkbox" id="green" name="green" type="checkbox" value="green" />green</label>
</div>
</div>
<div class="col">
<div>
<label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />orange</label>
</div>
<div>
<label><input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />purple</label>
</div>
<div>
<label><input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />blue</label>
</div>
<div>
<label><input class="checkbox" id="other" name="other" type="checkbox" value="other" />other</label>
</div>
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text">Message: <em class="required">(Required)</em></label>
<textarea name="text" id="text" cols="20" rows="10"></textarea>
</div>
</fieldset>
<fieldset id="remember-me">
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
</div>
<div>
<label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
</div>
</fieldset>
<div>
<button type="submit">Book Now »</button>
</div>
</form>
</body>
</html>