Putting It All Together - Web Standards: Mastering HTML5, CSS3, and XML - page 418

In this case, the border-spacing and empty-cells properties will be ignored. The padding and border of the
header and data cells can be set as shown in Listing 12-16.

Listing 12-16. Padding and Border for Header and Data Cells

th, td {
padding: 10px;
border: 1px solid #13b141;
}

Drop-Down Selection Lists
Selection lists can provide options to choose from. Suppose a language selector is needed for a multilingual web site.
It can be developed as follows:

Create a selection list with the select element. 1.

<select>

</select>

2. Add the default option.

<select>
<option value="http://www.example.com" selected="selected">English</option>

</select>

3. Add further options. Provide the URIs of each language version as the option values.

<select>
<option value="http://www.example.com" selected="selected">English</option>

<option value="http://de.example.com">Deutsch</option>
<option value="http://fr.example.com">Français</option>
<option value="http://es.example.com">Español</option>
<option value="http://ja.example.com"> 本語 </option>
</select>

4. To load the appropriate web page, the subdomains provided as the option values can be

used as target URIs through an event handler. Although the use of the onchange event
handler would be logical, it would be inaccessible for keyboard users. One of the solutions
is to provide a button with an onclick event handler, which is device-independent. For
example, the following function

<script type="text/javascript">
function goto_URL(object) {
window.location.href=object.options[object.selectedIndex].value;
}
</script>