More about WEB PAGE
Anatomy of the <head>
Grouping content
- Understanding the need to group content
- Using the div Element
- Grouping content into lists
- Dealing with figures
Creating advanced tables
- Adding table headers cells
- Denoting the headings and the table body
- Creating irregular tables
- Applying borders to the table element
Form Handling
- The action attribute
- The method attribute
- Configuring the Data Encoding
- Controlling form completion
- Setting the name of the form
- Adding labels to a form
- Automatically focusing on an input element
- Disabling individual input elements
- Grouping form elements together
- Using the button element
Customizing the input element
- Using the input element for text input
- Setting values and using placeholders
- Using a data list
- Creating read-only and disabled text boxes
- Restrict data entry
Using input validation
The th element denotes a header cell, allowing us to differentiate between data and the descriptions of that data. You can see how I added th elements to the table in Listing 11-3 to provide some context for the data values contained in the td elements.
Adding header cells to a table
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<table>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th>Size</th>
</tr>
<tr>
<th>Favorite:</th>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td>
<td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
</body>
</html>You can see that we are able to mix the th and td elements together in a row and also create a row that just contains th elements. You can see how the browser renders these below.
Adding Structure to a Table
You have a basic table, but you have managed to create a problem for yourself. When you go to style the table, you will find it hard to differentiate between the th elements that are on their own row and those that are mixed in with the data. It is not impossible, it just requires close attention.
Differentiating Between ‘th’ Elements in a Table
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
tr > th {
text-align:left;
background:grey;
color:white
}
tr > th:only-of-type {
text-align:right;
background: lightgrey;
color:grey
}
</style>
</head>
<body>
<table>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th>Size</th>
</tr>
<tr>
<th>Favorite:</th>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td>
<td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
</body>
</html>In this example, we created one selector that matches all of the th elements and a second style that matches only those th elements that are the only children of that type in a tr element. You can see the effect of the styles below.
This is a perfectly workable approach, but it lacks flexibility. If we add additional th elements to the rows of the table, our second selector won’t work anymore. We don’t really want to have to tweak our selectors every time we change the table. To solve this problem in a flexible way, you can use the thead, tbody, and tfoot elements. These elements allow you to add structure to a table, and the major benefit of this structure is that it makes working with the different parts of the table simpler, especially when it comes to CSS selectors.