Thông tin tài liệu
Defining Tables A table is a structured element that consists of rows and columns of cells. You can place any kind of content you like in these cells: text, images, and even other tables. If you can define it in HTML, you can place it inside a table cell. There are three sets of container tags required to build any table. The <table> and </table> tags define where the table begins and ends, the <tr> and </tr> tags define where each row begins and ends, and the <td> and </td> tags define the individual cells within each row. There are no tags specifically defining columns; they result when multiple rows of cells are stacked on top of each other. 1. Within the body section of your document, enter an opening <table> tag. 2. Move to the next line by hitting the Enter (or Return) key, indent your cursor and enter an opening <tr> tag to define the start of the first row. 3. Hit Enter again to move to the next line, indent your cursor again, and enter an opening <td> tag to indicate the start of a new cell. 4. Follow the opening <td> tag with the specific content you want placed in this cell. 5. Complete the cell by entering a closing </td> tag. 6. Repeat Steps 3 through 5 for each cell you want to add to the row. When your row is finished, move to the next line and enter a closing </tr> tag vertically aligned beneath the opening <tr> tag to aid readability. <table> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> 7. Repeat Steps 2 through 6 to add subsequent rows to the table. 8. After completing the desired number of rows, move to the next line and finish the table with a closing </table> tag, vertically aligned with the opening <table> tag. Listing 43-1 shows the code required to produce a table with three rows and three columns. Figure 43-1 shows the results displayed in a browser. 96 Part 6 Task 43 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • To make all text in a given cell bold and center-aligned, use <th></th> tags instead of <td></td> tags. TH stands for table header. • In this example, each cell is defined on its own line. Some authors prefer to define all cells in a given row on the same line to mimic better how the table appears in the browser. It’s up to you; it doesn’t matter how much white space you add in HTML to aid code readability. <html> <head> <title>Tables</title> </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> </html> Listing 43-1: Code for a borderless table with three rows and three columns Figure 43-1: The rather minimal table displayed in a browser Building Tables 97 Task 43 cross-references • Each row must contain the same number of cells to render properly in a browser.You can merge cells, however, using the colspan and rowspan attributes discussed in Task 45. • The border attribute is needed to help distinguish the cells of a table. To learn how to use this attribute, see Task 44. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Working with Table Borders I n Task 43, you created a simple table that organizes content into rows and columns. To make the individual cells more distinct, define borders for your table. Table borders are influenced by the following four attributes: border, cellpadding, cellspacing, and bordercolor. 1. To render a visible border around the table perimeter and interior cells, add the border attribute to the <table> tag and set it equal to a numeric value, such as: <table border=”2”> Figure 44-1 shows the simple table from Task 43 with this border attribute defined. Figure 44-1: A table with a border one pixel thick 2. To control the thickness of internal borders between cells, define a cellspacing attribute and set it equal to a numeric value, such as: <table border=”2” cellspacing=”10”> Figure 44-2 shows the result of adding this attribute value. Figure 44-2: The same table in Figure 44-1 with cellspacing increased to 10 pixels notes • If you don’t define a cellspacing attribute at all, the browser defaults to a setting of 2. • If you define no cellpadding, the browser defaults to a setting of 1. 98 Part 6 Task 44 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • When you specify no bor- der color, both Internet Explorer and Netscape use a light gray highlight color and a darker shadow color to produce a 3-D beveled effect. Once you define the bordercolor attribute, Internet Explorer loses the 3-D effect (see Figure 44-4) and renders the borders in a solid color. Netscape takes the border color you specify and light- ens it by 20% for the high- light color and darkens it by 20% for the shadow. To get Internet Explorer to mimic the Netscape border color effect, you must define bordercolorlight and bordercolordark attributes in addition to the bordercolor attribute, setting them equal to lighter and darker shades of the bordercolor attribute. 3. To control the amount of empty space between the border of a cell and the content inside it, define a cellpadding attribute. Set it equal to a numeric value, such as: <table border=”2” cellspacing=”10” cellpadding=”10”> Figure 44-3 shows the results in a browser. Figure 44-3: The same table in Figure 44-2 with cellpadding increased to 10 pixels 4. To specify a border color, define a bordercolor attribute. Set this equal to a hexadecimal value or predefined color name, for example: <table border=”2” cellspacing=”10” cellpadding=”10” bordercolor=”#FF0000”> Figure 44-4 shows the results rendered in the browser. Figure 44-4: The same table in Figure 44-3 with a border color applied Building Tables 99 Task 44 cross-reference • Tables divide a page into distinct regions. In HTML you can also divide the entire browser window into distinct regions, where each region displays a separate document (called frames). To learn more about frames, see Part 8. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Spanning Cells A single cell can span multiple columns or rows. The number of columns or rows a cell spans is defined using the colspan and rowspan attributes. To demonstrate how these attributes function, we’ll build a small table and apply the attributes individually. 1. In the body section of your document, enter the table code shown in Listing 45-1. Figure 45-1 shows the results in a browser. <table border=”1” cellspacing=”0” cellpadding=”10”> <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> Listing 45-1: Simple table code Figure 45-1: A simple nine-celled table, with three rows and three columns 2. To span a cell across a number of columns, add the colspan attribute to the <td> tag and set it equal to the number of columns you want to span. For example, to make the number 1 cell span across the other cells in the same row, add a colspan attribute equal to 3, as shown here: <td colspan=”3”> 1 </td> caution • If you fail to remove the cells you’re spanning across, the browser renders the expanded cell created by the span and includes the extra cells off to one side of the table. The effect is not typically pleasing to the eye. 100 Part 6 Task 45 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Spanning rows and columns can be useful when creating a single table heading (<th> </th> ) across the top of a table or down its side. 3. Remove the code representing the two cells being spanned. In this example, delete <td> 2 </td> and <td> 3 </td> from the first row, save the document, and preview it in a browser. Figure 45-2 shows the result. Figure 45-2: Cell 1 spanned across three columns 4. To span a cell across a number of rows, add the rowspan attribute to the <td> tag and set it equal to the number of rows you want to span. For example, to make the number 3 cell span the other cells in the same column, add a rowspan attribute equal to 3, as shown here: <td rowspan=”3”> 3 </td> 5. Remove the code representing the two cells being spanned. In this example, delete <td> 6 </td> in the second row and <td> 9 </td> in the third row, and then save your document and preview it in a browser. Figure 45-3 shows the result. Figure 45-3: Cell 3 spanned across three rows Building Tables 101 Task 45 cross-reference • Tables can also include captions and summaries (see Task 50). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Aligning Table Elements J ust like many other elements we’ve examined, the align attribute can be used to influence a table’s position as well as the content of individual table cells. When you apply the align attribute to the <table> tag, it affects the table the same way as it does an image: It positions the table relative to the other text inside the document. When you apply the align attribute to the <td> tag, it aligns the cell’s content. Because cells also possess height — whether specifically defined by the height attribute or forced by the cell’s content — you can verti- cally align content within cells using the valign attribute. 1. To specify a table’s alignment, define an align attribute of the <table> tag and set it equal to left, right, or center. Figure 46-1 shows the possible results. Figure 46-1: Three tables aligned around text: left, right, and center (from top to bottom) notes • The default value for the align attribute is left. • The default value for the valign attribute is middle. Vertical align- ment, as shown in Figure 46-3, is not only relative to the cell but, in the case of baseline, relative to content in adjacent cells. In Figure 46-3, the base- line of the image is at the bottom of the cell so that’s where the first cell aligns its text. 102 Part 6 Task 46 caution • Older browsers do not sup- port align and valign attributes defined for the <tr> tag. Consequently, it is always best to apply them to <td> tags instead. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. cross-reference • Tables and images respond similarly to the align attribute. To learn more about aligning images, see Task 30. 2. To align the content within a cell horizontally, define an align attribute for the <td> tag and set it equal to left, right, or center. Figure 46-2 shows the result of each value. Figure 46-2: Cells aligned to the left, center, and right 3. To align the content within a cell vertically, define a valign attribute for the <td> tag and set it equal to top, middle, bottom, or baseline. Figure 46-3 shows the result of each value. Figure 46-3: Cells vertically aligned to the top, middle, and bottom, and at the baseline 4. To set the horizontal or vertical alignment for an entire row, define the align or valign attributes of the <tr> tag. Building Tables 103 Task 46 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Defining Dimensions for Table Elements L eft to its own devices, the dimensions of the overall table or individual cell is governed by the content placed within it. Like some other elements you’ve seen, the dimensional attributes width and height can also be applied to the <table>, <tr>, and <td> or <th> tags with more or less similar results. 1. To specify the width of a table, add the width attribute to the open- ing <table> tag and set it equal to a pixel value or a percentage. For example: <table width=”200”> or: <table width=”80%”> Figure 47-1 shows examples of different table widths. Figure 47-1: Various table widths and their effects 2. To specify the width of an individual cell, add the width attribute to the <td> tag and set it equal to a pixel value or a percentage. Figure 47-2 shows examples of cell widths. notes • If there’s more content inside a table than the dimensions you define can handle, the browser simply ignores the dimension val- ues and renders the table large enough to show all the content. • When you use percentages, the table width is set to a percentage of the parent element. For example, if the table width is 80%, and it’s nested inside the cell of another table, it will be 80% of the width of the cell. If the table is inside a layer (see Part IX), then it will be 80% of the width of the layer. If the table is not nested inside another ele- ment, its width will be 80% of the browser window — which means it will expand and contract with the browser window’s size to maintain that percentage. 104 Part 6 Task 47 cautions • When applying widths to cells, make sure the total values don’t exceed or con- flict with any width value you assign to the <table> tag. For exam- ple, don’t set a table width as a percentage and then add pixel width values to every cell in a row. Also, don’t define cell widths whose combined values exceed or are less than the defined table width. • Setting a height value for one cell in a row effectively sets the entire row to that height. Conversely, setting the width of a cell effec- tively sets the entire col- umn to the same width. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • It’s possible to combine percentage and pixel val- ues across table and cell widths. For example, in a two-column table you can set the entire table to a width of 100%, yet set the first column to a width of 150 pixels. Make sure the content inside the first column is also 150 pixels wide and then set the second column equal to 100%. The second column will try to take over the screen while the first column holds its ground. Newer browsers don’t nec- essarily require the second column value but many older browsers do, making this a good backward- compatible practice. • Older browsers do not accept width and height attributes defined for the <tr> tag. Consequently, it is always best to apply them to the <td> tags instead. Figure 47-2: Different cell and table widths 3. To define the height of a cell, add a height attribute to the <td> tag and set it equal to a pixel value or percentage. Figure 47-3 shows the effect of different height values. Figure 47-3: The effect of various height values 4. To set the width or height of an entire row, add width and height attributes to the <tr> tag, setting them equal to pixel values or percentages. Building Tables 105 Task 47 cross-reference • The width and height attrib- utes are deprecated for <tr>, <td>, and <th> tags in favor of Cascading Style Sheets (see Part 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... 7: Working with Forms Task 51: Defining Form Elements Task 52: Formatting Text Fields Task 53: Formatting Password Fields Task 54: Formatting Text Areas Task 55: Formatting Check Boxes Task 56: Formatting Radio Buttons Task 57: Formatting Selection Menus Task 58: Formatting Selection Lists Task 59: Formatting File Fields Task 60: Formatting Submit and Reset Buttons Task 61: Using Graphic Images for... applying it to each tag 1 To define a background color for the entire table, add the bgcolor attribute to the opening tag, setting it equal to a hexadecimal value or a predefined color name For example: 2 To define the background color for an individual row, apply the bgcolor attribute to the tag and, for a single cell, apply it to the or tag For... e-mail Any HTML document that contains a form has a section inside it containing opening and closing tags Within this section lies the regular content and its markup, as well as specific form-related elements called form controls (check boxes, radio buttons, menus, and so on) Users fill in “the form” by entering information into text fields, making selections from menus, and clicking check boxes... < /html> Listing 51-2: A tag with action and method attributes defined 4 To mark the end of the form, insert a closing tag Listing 51-3 shows a completed form container Forms < /html> Listing 51-1: The opening tag and action attribute Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Working with Forms 115 3 Follow the action attribute with the method attribute, setting it equal to post or get, as shown in Listing 51-2 Task 51 Forms . watermark. Part 7: Working with Forms Task 51: Defining Form Elements Task 52: Formatting Text Fields Task 53: Formatting Password Fields Task 54: Formatting Text Areas Task 55: Formatting Check Boxes Task. border color effect, you must define bordercolorlight and bordercolordark attributes in addition to the bordercolor attribute, setting them equal to lighter and darker shades of the bordercolor attribute. 3 hexadecimal value or predefined color name, for example: <table border=”2” cellspacing= 10 cellpadding= 10 bordercolor=”#FF0000”> Figure 44-4 shows the results rendered in the browser. Figure
Ngày đăng: 03/07/2014, 05:20
Xem thêm: HTML in 10 Steps or Less- P7 potx, HTML in 10 Steps or Less- P7 potx
