|
|
|
 |
 |
|
 |
|
 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
Lab #8Tables8.1 Table TagsUp to this point, we have organized the text of our web pages in paragraphs or lists. However, as you've likely seen by reading these labs, we can create and use tables to align and organize our data. Tables are a powerful formatting tool in HTML, and have a great many attributes and nested tags which define how the resulting table will appear.One example of a simple table is the table below.
This table contains two rows of data and one column of data. The table also has a one pixel border. To create this table we used the following HTML code: <table border="1">From this simple example, we can deduce the following syntax of HTML tables: <table border="width_value">A table is created by using the opening and closing table tags. Inside the opening table tag, we can optionally specify a border attribute which will define the thickness of the table's border in pixels. If the border attribute is not provided, the table will be rendered with a default border of 1 pixel. Within the opening and closing tags, we can create rows for our table by using the table row tags (<tr> and </tr>), and within the table row tags we can place one or more table data cell tags (<td> and </td>) which will create the actual cells of the table. Therefore, to create a table with a two pixel border which contains three columns and four rows, we would use the following HTML: <table border="2">The cells of this new table contain no data, since we did not place any text between the table data cell tags. However, if we modify our HTML code to the following... <table border="2">we would create the following table.
Of course, we can add formatting to the contents of each cell, producing even more spectacular results, such as:
To improve the appearance of our product pages, we'll incorporate the use of a table to align the product image, title, and description. Referring back to the mock-up of our product pages in Lab 2 (Figure 2), we see that our original intention was to place the product photo near the top of the page, to the left of the product number and product name. Beneath the photo, number and name, we placed the text of the description of the product and the price. Thus, for now, we'll place a table which has one row and two columns in the product pages and insert the photo, number and name of our product in the table. Then, beneath the table, we'll relocate the text for the product description and the price. The HTML code below will demonstrate how we modified the product page, and the results of our changes can be seen in Figure 1. <html>
In addition to table data cell tags (<td>, </td>), HTML includes table header cell tags (<th>, </th>) which are used to enhance the appearance of row and column headers in a table. There is no rule as to where in the table header cells can be placed. That is, they do not necessarily need to be located at the start of a row or column, and their use is entirely optional. Most web browsers will render the contents of a table header cell by bolding the enclosed text so that it visually stands out. As an example, we will take one of our sample tables from above and modify it to include the use table header cells. <table border="2">
Notice how the row and column headers are rendered by your browser in the example above.
8.2 Spanning Rows and ColumnsIn the previous example, we've had to place our Product Description text below the table we included. Had we included the text in the table, we'd need to insert it into the contents of one of the cells of the table. However, it would be located in the second row of the table in either the left of right cell in that row. That is, our results might appear as either of the two tables below:
Ideally, we would like to include our description as part of the table. However the appearance of the description in only one of the two cells looks rather peculiar. Fortunately we have access to the colspan attribute which can be used to specify the number of columns a table data cell will span. By modifying the table data cell tag for the first cell in the second row, we can specify that that cell will span 2 columns (the originial column to the left, and the one to the right). That is, <tr><td colspan="2"><p><b>Product Description:</b> <blockquote>Does your house cat like to lie in the window and day dream of being outside? Is your feline prone to napping in the window? The Cat Window Lounger is the <u>perfect present</u> for your special friend.</p>By rewriting this bit of HTML in our table, we can now place the Product Description text in one cell in the second row which spans both columns. The result of this change is reflected in Figure 2.
Not only can you span multiple columns of a table, you can also span multiple rows. The rowspan attribute works exactly the same way that colspan does. Simply add it to a table data cell tag (<td>) and provide the number of rows you wish to span.
8.3 Cell Padding and SpacingTwo additional HTML attributes can be used in tables to control the spacing between and within table cells. These are the cellpadding and cellspacing attributes, and they are optionally added to the table tag. The first attribute, cellpadding, accepts an integer value which specifies the amount of extra (added) space between a cell's contents and the border of a cell. The amount specified is in terms of pixels, and this width is applied around the cell's contents (on all four sides).The second attribute is the cellspacing attribute, which also accepts an integer value specifying the amount of extra space (in pixels) that should be added by the browser around the outside of each table cell. For example, let's take our product page (somewhat abbreviated, and before we applied the spanning attribute):
Currently, the width of each column is as wide as the widest cell in the column. Similarly, the height of each row is as big as the tallest cell in the row. There is no additional cell padding or spacing applied. If we modify the <table> tag for this table to the following, we'll add 10 pixels of cell padding to the interior of each cell. <table border="1" cellpadding="10">The result of our change is shown below. Notice how there is extra space (10 pixels) around each of the cells' contents.
By adding the cellspacing attribute to the table tag as well, we can change the appearance of the table again! <table border="1" cellpadding="10" cellspacing="10">
Now, there is additional space added to the table between the cells. The cellpadding attribute can also be expressed in terms of a percentage. If a percentage is specified, the left and right margins of the cell are padded with equal amounts (1/2 each) of the specified percentage of the available horizontal space. Likewise, the top and bottom margins of the cell are padded with equal amounts (1/2 each) of the specified percentage of the available vertical space.
8.4 Table and Cell AlignmentUp to this point, we have not covered any details on how to provide alignment directions to a browser with regards to a table or a cell's contents. We can do so, however, with just a few more attributes for both the table and cell tags.By adding the align attribute to the table tag (<table>), we can provide direction to the browser as to the correct position of the table with respect to the document. Valid values for the align attribute include left (the table is aligned with the left margin of the document), center (the table is aligned in the horizontal center of the document), and right (aligning the table with the right margin of the document). Thus, to place the table in the center of our web page (horizontally centered), we would modify our existing HTML to be: <table align="center" border="1" cellpadding="10" cellspacing="10">HTML 4.0 has deprecated the use of the align attribute in favor of Cascading Style Sheets (CSS). A table data cell can contain the align attribute as well. In addition to the left, center, and right values described above, you can provide the justify value. Thus, you can position the contents of a table cell adjacent to the left margin of the cell, in the center of the cell, along the right margin of the cell, and fully (double) justified (used for text values). Table data cell tags may also contain the valign attribute which specifies the vertical alignment of the cell's contents. Possible values for this attribute are top, middle, bottom, and baseline. The top setting places the contents of the cell flush with the top margin of the cell. Likewise the bottom setting places the contents flush with the bottom margin of the cell. The middle setting vertically aligns the contents, providing equal spacing above and below the contents. Finally, the baseline setting will force all of the text in all of the cells in the same row to have a common baseline for their first line of text. This last setting generally helps to keep the appearance of textual contents vertically aligned on a common vertical point. In the example below, we have modified the product page for the catnip toy product, using several align and valign attributes. Note that in the example, we have left the border "on" by setting it to one pixel wide, so that you can more easily view the alignment settings in action. Figure 3 shows a screen capture of this product page. <html> You can also modify the overall width of your table by using
the width attribute in the table tag when creating your table.
The width attribute accepts both a pixel value (integer) and a
percentage value to designate how wide the table should be rendered. If
the percentage value is used, the percentage is interpreted in terms of available
horizontal space in the browser at the point of the table's insertion.
For example, in the creation of the table above, we could have modified the code as demonstrated below so that the table was only 80% of the width of the available horizontal space. <body>
8.5 Nested TablesOur final topic on tables is the notion of placing one table within another. As with nested lists (covered in Lab #7) we can place one table within the body of another. To do so, simply add the table, table row and table data cell tags for the inner table within the table data cell tags for a cell in the outer table.For example, in the code below, we'll create a nested table which holds the description of a product. This inner table will be placed within the single cell in the second row of the outer table, which also contains the photo of our product and the item name and number for the product. Again, we'll leave on the borders of the tables, so that you can more easily identify the cells and tables. A snapshot of our modifications can be seen in Figure 4. <html>
About the labs: These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis. ISBN: 0-7637-1760-6 Lab content developed by Pete DePasquale and John Lewis. |
 |
|
 |
 |
|
|||
