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
Most tables are straightforward grids, where each cell occupies one position in the grid. However, to represent more complicated data, you sometimes need to create irregular tables, where cells are spread across multiple rows and columns. You create such tables using the colspan and rowspan attributes of the td and th elements.
Creating an Irregular 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>
thead th, tfoot th {
text-align:left;
background:grey;
color:white
}
tbody th {
text-align:right;
background: lightgrey;
color:grey
}
[colspan], [rowspan] {
font-weight:bold;
border: medium solid black
}
thead [colspan], tfoot [colspan] {
text-align:center;
}
</style></head><body><table><thead><tr><th>Rank</th>
<th>Name</th>
<th>Color</th><th colspan="2">Size & Votes</th></tr></thead><tbody><tr><th>Favorite:</th>
<td>Apples</td>
<td>Green</td><td>Medium</td>
<td>500</td></tr><tr><th>2nd Favorite:</th>
<td>Oranges</td>
<td>Orange</td><td>Large</td>
<td>450</td></tr><tr><th>3rd Favorite:</th>
<td>Pomegranate</td><td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td><td>203</td></tr><tr><th rowspan="2">Joint 4th:</th><td>Cherries</td><td rowspan="2">75</td></tr><tr><td>Pineapple</td><td>Brown</td><td>Very Large</td></tr></tbody><tfoot><tr><th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th></tr></tfoot></table></body>
</html>If you want a cell to span multiple rows, you can use the rowspan attribute. The value you assign to this attribute is the number of rows to span. Similarly, if you want a cell to span multiple columns, you use the colspan attribute. We added some additional styles to the example document to highlight the cells that span multiple rows or columns. The affected cells are shown with a thick border.
You apply the colspan and rowspan attributes to the cell that is the uppermost and leftmost of the part of the grid you want to cover. You omit the td or tr elements that you would have included normally.
A Simple 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>
td {
border: thin solid black;
padding: 5px;
font-size:x-large;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>The table in this example is a 3×3 regular grid, as shown below.
If you want one cell in the middle column to span all three rows, you apply the rowspan attribute to cell 2, which is the uppermost (and leftmost, but that doesn’t matter in this example) cell of the area of the grid you want to cover. You also have to remove the cell elements that the expanded cell will cover— cells 5 and 8, in this case.
Expanding a Cell to Cover Multiple Rows
<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>
td {
border: thin solid black;
padding: 5px;
font-size:x-large;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
</body>
</html>You can see the result of these changes below.
The browser is responsible for working out how the other cells you define should be fitted around the expanded cell.