Xem mẫu
Table Parts
Before getting into the actual HTML code to create a table, let`s look at the following terms so that we both know what we`re talking about:
● The caption indicates what the table is about: for example, "Voting Statistics, 19501994," or "Toy Distribution Per Room at 1564 Elm St." Captions are optional.
● The table headings label the rows, columns, or both. Usually they`re in an emphasized font that`s different from the rest of the table. They`re optional.
● Table cells are the individual squares in the table. A cell can contain normal table data or a table heading.
● Table data is the values in the table itself. The combination of the table headings and table data makes up the sum of the table.
Figure 8.1 shows a typical table and its parts.
Figure 8.1. The elements that make up a table.
The
Element
To create a table in HTML, you use the element to enclose the code for an optional caption, and then add the contents of the table itself:
...table caption (optional) and contents...
To demonstrate what the HTML code for a complete table looks like, here`s an example of the code that created the table shown in Figure 8.1. Don`t be concerned if you don`t know what this all means right
now. For now, notice that the table starts with a tag and its attributes, and ends with a
tag:
file:///G|/1/0672328860/ch08lev1sec2.html (1 von 10) [19.12.2006 13:49:00]
Vital Statistics
| Name | Height | Weight | Eye Color |
| Alison | 5`4" | 140 | Blue |
| Tom | 6`0" | 165 | Hazel |
| Susan | 5`1" | 97 | Brown |
The Table Summary
If you want to play by the rules of XHTML, every time you create a table, the element must include the summary attribute. The value of the summary should be a short description of the table`s contents. This value isn`t used by normal visual browsers; instead, it`s intended for screen readers and other browsers created for users with disabilities. For example, the tag in the previous example should include a summary attribute like this:
For your pages to play by the XHTML rules, you must include the summary attribute for all of your tables (just as you must include alt text for all of your images). You`ll learn more about why accessibility features are important in Lesson 17, "Designing for the Real World."
Rows and Cells
Now that you`ve been introduced to the element, we`ll move on to the rows and cells. Inside the element, you define the actual contents of the table. Tables are specified in HTML row by row, and each row definition contains definitions for all the cells in that row. So, to define a table, you start by defining a top row and each cell in turn, left to right. Then you define a second row and its cells, and so on. The number of columns is automatically calculated based on how many cells there are in each row.
Each table row starts with the tag and ends with the closing
. Your table can have as many rows and columns as you like, but you should make sure that each row has the same number of cells so
file:///G|/1/0672328860/ch08lev1sec2.html (2 von 10) [19.12.2006 13:49:00]
that the columns line up.
The cells within each row are created using one of two elements:
● ... | elements are used for heading cells. Generally, browsers center the contents of a cell and render any text in the cell in boldface.
● | ... | elements are used for data cells. TD stands for table data.
Note
You might have heard somewhere that closing tags are not required for , | , and | tags. You might even see HTML that`s written without them. However, XHTML requires that you include them, and including them makes your code much easier to follow. Don`t leave them out.
In this table example, the heading cells appear in the top row and are defined with the following code:
| Name | Height | Weight |
Eye Color |
The top row is followed by three rows of data cells, which are coded as follows:
| Alison | 5`4" | 140 | Blue |
| Tom | 6`0" | 165 | Blue |
| Susan | 5`1" | 97 | Brown |
As you`ve seen, you can place the headings along the top edge by defining the elements inside the first row. Let`s make a slight modification to the table. You`ll put the headings along the left edge of the table instead. To accomplish this, put each | in the first cell in each row and follow it with the data that pertains to each heading. The new code looks like the following:
file:///G|/1/0672328860/ch08lev1sec2.html (3 von 10) [19.12.2006 13:49:00]
Input
| | Name | Alison | Tom | Susan |
| Height | 5`4" | 6`0" | 5`1" |
| Weight | 140 | 165 | 97 |
| Eye Color | Blue | Blue | Brown |
Figure 8.2 shows how this table is displayed in a browser.
Output
Figure 8.2. An example of a table that includes headings in the leftmost column.
Empty Cells
Both table heading cells and data cells can contain any text, HTML code, or both, including links, lists, forms, images, and other tables. But what if you want a cell with nothing in it? That`s easy. Just define a
file:///G|/1/0672328860/ch08lev1sec2.html (4 von 10) [19.12.2006 13:49:00]
cell with a or | element with nothing inside it:
Input
Some browsers display empty cells of this sort as if they don`t exist at all. If you want to force a truly empty cell, you can add a line break with no other text in that cell by itself:
Input
Figure 8.3 shows examples of both types of empty cells: the empty cell and the really empty cell with the line break added.
Output
Figure 8.3. The difference between empty cells and really empty cells.
file:///G|/1/0672328860/ch08lev1sec2.html (5 von 10) [19.12.2006 13:49:00]
...
- tailieumienphi.vn
nguon tai.lieu . vn
|
