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 all the cells in that row. So, to create a table, you start with the top row and then each cell in turn, from left to right. Then you define a second row and its cells, and so on. The number of columns is 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 that the columns line up. The cells within each row are created using one of two elements: n ... cell and render any text in the cell in boldface. ... , , 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. Name Height Weight Eye Color Alison 5’4” 140 Blue Tom 6’0” 165 Blue Susan 5’1” 97 Brown 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: Name Alison Tom Susan Height 5’4” 6’0” 5’1” Weight 140 165 97 Eye Color Blue Blue Brown or element with nothing inside it: element, created just for this purpose, displays the text inside the tag as the table caption (usually centered above the table). Although you could use a regular paragraph or a heading as a caption for your table, tools that process HTML files can extract elements into a separate file, automatically number them, or treat them in special ways simply because they’re captions. element goes inside the element just before the table rows, and it contains the title of the table. It closes with the tag: Vital Statistics Colors ...add table rows and cells here...
tags (where the line add table rows and cells here is). The first row is the three headings along the top of the table. The table row is indicated by and each cell by a tag: Red Yellow Blue Red Red Orange Purple Red Yellow Blue Red Red Orange Purple Yellow Orange Yellow Green Blue Purple Green Blue
element goes just after the tag and just before the first tag: Mixing the Primary Colors Red Yellow Blue here, but it could be just as easily. Because there’s nothing in the cell, its formatting doesn’t matter. element defines how wide the table will be on the page. width can have a value that is either the exact width of the table (in pixels) or a percentage (such as 50% or 75%) of the current browser width, which can therefore change if the window is resized. If width is specified, the width of the columns within the table can be compressed or expanded to fit the required size. To make a table as wide as the browser window, you add the width attribute to the table, as shown in the following line of code: tag, is the most common attribute of the element. With it, you specify whether border lines are displayed around the table and if so, how wide the borders should be. The border attribute has undergone some changes since it first appeared in HTML: n to draw a border around the table. The border could be rendered as fancy in a graphical browser or just a series of dashes and pipes (|) in a text-based browser. creates a 1-pixel wide border, a 2-pixel wide border, and so on. HTML 3.2 and later browsers are expected to display the old HTML 2.0 form of , with no value, with a 2-pixel border (as if you specified ).. Borderless tables are useful when you want to use the table structure for layout purposes, but you don’t necessarily want the outline of an actual table on the page. Browsers that support HTML 3.2 and later are expected not to display a border (the same as ) if you leave out the border attribute entirely. element, with a value in pixels for the amount of cell padding you want. Here’s the revised code for your element, which increases the cell padding to 10 pixels. The result is shown in Figure 10.10. element affects the spacing for the table. Cell spacing is two pixels by default. Cell spacing also includes the outline around the table, which is just inside the table’s border (as set by the border attribute). Experiment with it, and you can see the difference. For example, Figure 10.11 shows our table with cell spacing of 8 and a border of 4, as shown in the following code: or ) to indicate the width of columns in a table. As with table widths, discussed earlier, you can make the width attribute in cells an exact pixel width or a percentage (which is taken as a Vital Statistics Name Height Weight Eye Color
Vital Statistics Name Height Weight Eye Color
Vital Statistics Name Height Weight Eye Color
TC 7 Suspicious except when hungry, then friendly TC 7 Suspicious except or elements, and the browser keeps all the data in that cell on one line. Note that you can always add Player Name Batting Average Home Runs RBI Babe Ruth .342 714 2217 Ted Williams .344 521 1839
Batting Average , , , or elements. Just as in the tag, the value of bgcolor is a color specified as a hexadecimal triplet or one of the 16 color names: Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, or Silver. In the style sheet world, you use the background-color property or the background property. You can use the style attribute in the , , , and elements, just as you can in most other elements. Each background color overrides the background color of its enclosing element. For example, a table background overrides the page background, a row background overrides the table’s, and any cell colors override all other colors. If you nest tables inside cells, that nested table has the background color of the cell that encloses it. Also, if you change the color of a cell, don’t forget to change the color of the text inside it so that you can still read it.Checkerboard and tags. It’s perfectly okay to use it within your tables. That said, it is more efficient to align the contents of cells using CSS if you want to apply the alignment to many cells at once. Vertical alignment (the valign attribute) defines the vertical alignment of the data within the cell: flush with the top of the cell (top), flush with the bottom of the cell (bottom), or vertically centered within the cell (middle). Newer browsers also implement valign=“baseline”, which is similar to valign=“top” except that it aligns the baseline of the first line of text in each cell. (Depending on the contents of the cell, this might or might not produce a different result than valign=“top”.) By default, heading cells are centered both horizontally and vertically, and data cells are centered vertically but aligned flush left. You can override the defaults for an entire row by adding the align or valign attributes to the element, as in the following: or elements: 14 16 No Data 15 Cell Alignments <style type=”text/css”> td { height: 100px; } Left Centered Right Top Centered Bottom
tag determines the alignment of the caption. Depending on which browser you’re using, however, you have different choices for what align means. There are four values for the align attribute of the tag, top, bottom, left, and right. By default, the caption is placed at the top of the table (align=“top”). You can use the align=“bottom” attribute to the caption if you want to put the caption at the bottom of the table, like the following: Torque Limits for Various Fruits Torque Limits for Various Fruits This is a caption or elements, along with the number of rows or columns you want the cell to span. The data within that cell then fills the entire width or length of the combined cells, as in the following example:Row and Column Spans Ring Clearance Ring Piston Upper 3mm Lower 3.2mm
Service Data Used Belt Deflection Set deflection of new belt Limit Adjust Deflection Alternator Models without AC 10mm 5-7mm 5-7mm Models with AC 12mm 6-8mm Power Steering Oil Pump 12.5mm 7.9mm 6-8mm Alternator Models without AC Models with AC Power Steering Oil Pump Set Adjust Drive Belt Deflection Service Data <style type=”text/css”> td, th { border: 1px solid #cc9900; } table { background-color: #ffffcc; border: 4px solid #cc9900; Drive Belt Deflection Used Belt Deflection Set Limit Adjust Alternator Models without AC 10mm 5-7mm 5-7mm Models with AC 12mm 6-8mm Power Steering Oil Pump 12.5mm 7.9mm 6-8mm
and ... element is used to enclose one or more columns in a group. The closing tag is optional in HTML, but it’s required by XHTML. This element has two attributes: n span element defaults to a element contains one or more elements, as follows: defines the structure of table columns, Grouping Columns Science and Mathematic Class Schedules Class Room Time Biology Science Wing, Room 102 8:00 AM to 9:45 AM Science Science Wing, Room 110 9:50 AM to 11:30 AM Physics Science Wing, Room 107 1:00 PM to 2:45 PM Geometry Mathematics Wing, Room 236 8:00 AM to 9:45 AM Algebra Mathematics Wing, Room 239 9:50 AM to 11:30 AM Trigonometry Mathematics Wing, Room 245 1:00 PM to 2:45 PM
, , and elements, respectively. Each of these elements must contain the same number of columns. The ... element defines the heading of the table, which should contain information about the columns in the body of the table. Typically, this is the same type of information that you’ve been placing within header cells so far in the lesson. The starting tag is always required when you want to include a head section in your table, as is the closing tag under XHTML 1.0. The head of the table appears right after the element or after elements, as the following example shows, and must include at least one row group defined by the element. I’m including style attributes in the row grouping tags to illustrate how they are used. The table is formatted as follows: Science and Mathematic Class Schedules Class Room Time ... element defines the footer of the table. The starting tag is always required when defining the footer of a table. The closing tag was optional in HTML 4.01, but it’s required for XHTML 1.0 compliance. The footer of the table appears immediately after the table heading if one is present or after the element if a table heading isn’t present. It must contain at least one row group, defined by the element. A good example of information that you could place in a table footer is a row that totals columns of numbers in a table. You must define the footer of the table before the table body because the browser has to render the footer before it receives all the data in the table body. For the purposes of this example, we’ll include the same information in the table head and the table footer. The code looks like this: Class Room Time ... element defines a body section within your table. The start tag is required if at least one of the following is true: n Biology Science Wing, Room 102 8:00 AM to 9:45 AM Science Science Wing, Room 110 9:50 AM to 11:30 AM Physics Science Wing, Room 107 1:00 PM to 2:45 PM Geometry Mathematics Wing, Room 236 8:00 AM to 9:45 AM Algebra Mathematics Wing, Room 239 9:50 AM to 11:30 AM Trigonometry Mathematics Wing, Room 245 1:00 PM to 2:45 PM
... ... ... ... ... ... ... ... or , , or or or or or , , or tag) are the border (defined with the border tag), header cells (), data cells ( ), and table rows ( ). 2. The border attribute is the most common attribute for the table tag. It specifies, , and define the head, body, and foot of a table.Page Title Please Log In tag. Each label is attached to the form field it is associated with through the for attribute, which should match the name or id attribute of the form tag with which it is associated. The element doesn’t provide any formatting by default, but you can make it appear however you want using CSS. Finally, add a Submit button so that the user can send the information she entered into the form. Here’s the form so far:Login Form <style type=”text/css”> div {Please Log In elements to space out the form elements a bit. Then, I used CSS to align the form fields vertically and right-align the labels. You can only apply widths to block-level elements, so I set the display property on the labels to block. Then I used float: left and a width of 150 pixels to get the form fields to move to the right of the labels. Setting the text-align property to
