HTML Tables CrossBrowser Sophisticated Page Layout Read Textbook

About Tables n n The <table> tag has a huge variety of attributes and is easily the most sophisticated HTML tag Remember: The HTML table model is row based n You create a table by defining rows, one at a time n n Within each row you create table cells Each cell within a table is like a mini HTML document and can have its own text flow, alignment, color, etc. © 2001 D & D Enterprises 2

Table Display Normally the browser immediately displays text as it is received from the server modifying the scroll bar to make additional text available as it arrives until the whole document has been transferred © 2001 D & D Enterprises 3

Table Display n As you have probably noticed, however, in-line graphic images can cause the browser to delay displaying text until a graphic's size is known n n This is why you are encourage to use height and width attributes! Similarly, when the browser encounters a <table> tag, it will not display any part of the table until it receives the entire table from the server and can determine a best-fit layout for column and cell sizes © 2001 D & D Enterprises 4

About Tables n The browser collects all of the table cells, adjusts their sizes so they fit together and creates a row n After all of the rows are assembled the browser collects all of them together and creates the complete table © 2001 D & D Enterprises 5

About Tables n n Since the size of one cell or row can be affected by other cells or rows in the table, the browser may have to go back and adjust other rows to make the table look right Because of these dependencies, most HTML tables require two passes by the browser: n n One to size the individual cells and rows, and another to display the final table after making any adjustments © 2001 D & D Enterprises 6

About Tables n You may have noticed this 2 pass behavior when loading a page with large, complex tables n n The page display pauses while the browser reads and processes the table, and then the whole table appears at once © 2001 D & D Enterprises 7

About Tables n This two-pass behavior is a real pain, making your documents display slowly and erratically n n To mitigate this, HTML 4. 0 includes new features that allow a one-pass table display, permitting browsers to display tables row by row, as they are received by the browser n So, use the correct 4. 0 <!Doctype> statement!! © 2001 D & D Enterprises 8

Table Review URL: http: //204. 98. 17. 1/learnhtml/56 tables. htm Simple Table Review n An HTML table is contained in the <table> and </table> tags n n These tags occur only within the <body> section of a document A document can contain any number of tables, and tables can be embedded (with caution) inside other tables n Within a <table> tag pair, each row of the table is delimited by paired <tr> and </tr> tags, and each cell within a row is delimited by paired <td> and </td> tags © 2001 D & D Enterprises 9

Simple Table Review A tag pair for table headings <th> and </th> is essentially the same as the <td> and </td> tags except that <th> formats text with emphasized and centered attributes © 2001 D & D Enterprises 10

Simple Table Review n By default, tables do not have any borders or gridlines n n However, in most cases where you would use a table, it is helpful to mark off the cell divisions with borders and gridlines to help the user understand the data. To add a default border and gridlines to a table, you include the BORDER attribute in the <table> tag that initiates the table: <table border> © 2001 D & D Enterprises 11

Simple Table Review n You cannot independently control the table's border and gridlines n Their width and appearance can be expected to vary from one browser to another, much as the rendition of the <hr> horizontal rule tag varies among browsers © 2001 D & D Enterprises 12

Simple Table Review n n n Open template. html in Home. Site save it as table 1. html Add the Title text: Table Review After the opening <body> tag add the following: <table border> <td>this is cell #1</td> <td>this is cell #2</td> </tr> </table> © 2001 D & D Enterprises 13

Page Layout: Tables n Tables also were not designed for layout per se n n They were designed for representing tabular data, but their layout properties are less of a "side effect" than the preceding hacks Tables are fairly flexible but do take some effort to master, and they can complicate your HTML code © 2001 D & D Enterprises 14

Page Layout: Tables n In homesite, rename template. html n table_columns. html <table cellpadding="8"> <tr> <td valign="top"> Here is one column of data -- the way to get this is, in itself, something of a surprise. Not exactly what you would expect! </td> <td valign="top"> So, it turns out that tables can be used to create columnar layout as illustrated here. Note that here you need to make use of cellpadding to keep the columns from colliding with each other. </td> </tr> </table> © 2001 D & D Enterprises 15

16

Using Tables for Advanced Page Layout Width is a Key Attribute © 2001 D

Table Width n Sometime you want to control the absolute or relative width of the table within the browser window n HTML Tables supports this functionality with the WIDTH modifier, which you can apply to any of the <table>, <th>, or <td> tags n The parameter for the WIDTH modifier is a single numeric value, which can be either an absolute number of pixels or a percentage of the total window or table width. html © 2001 D & D Enterprises 18

Width n Setting table width is an important concept if you consider screen size… n n n 640 x 480? 800 x 600? If you are creating a layout that wraps and is dependent of screen width, you can fix the width of your presentation by enclosing all of your content in a table n This is a very common Web page layout technique n BUT! What width to make the table? ? ? ? ? © 2001 D & D Enterprises 19

20

What Size Should I Design My Page? n So, do you develop for 640 x 480 or 800 x 600 n How do you make up your mind? http: //hotwired. lycos. com/webmonkey/99 /41/index 3 a_page 3. html? tw=design n What is the "sweet spot" n Non-scrolling region © 2001 D & D Enterprises 21

Table Width Tutorial n Project Cool http: //www. projectcool. com/developer/basics /tables/03 D-lookfeel-width. html ©

Width for Columns n Here is a basic two-column layout using a <TABLE> that has a single table row with three data cells: n n one each for the columns of text and an intervening empty cell to more attractively separate the two columns There is also a large cellspacing attribute value to create additional intervening space between the columns. html © 2001 D & D Enterprises 23

Another Width: Sideheads n The text-heading features available in HTML are the <H 1> through <H 6> tags n n These tags are always embedded in the text flow, separating adjacent paragraphs of text Through multiple columns, you can achieve an alternative style that places headings into a separate side column, running vertically alongside the document text n Here is a fairly fancy pair of side heads: sides. html © 2001 D & D Enterprises 24

Using Width for Your Layout n Using Tables to do Page Layout n http:

Advanced Page Layout: Tables n Tables can be good for placing images relative to each other within the browser window n Occasionally you will notice that browsers don't do exactly what you thought you told them n n Realize that values in HTML attributes are usually only treated as hints to the browser, which may have several other constraints to satisfy Additionally, graphics-intensive tables can take a considerable time to download and render n There are quite a few major sites whose download time suggests that the designers have not tested with slower modems and computers © 2001 D & D Enterprises 26

Troubleshooting Advanced Layouts n Microsoft Developers Network n http: //msdn. microsoft. com/workshop/design /layout/facts 1.

Table Alignment Text Attributes Table Attributes © 2001 D & D Enterprises 28

Cell Alignment Defaults align. html The contents of a header <th> cell are centered horizontally in the cell The contents of a data <td> cell are aligned to the left edge of the cell n n If you want to change this behavior, use the ALIGN attribute with the appropriate cell tag The align attribute accepts one of four values: n left, center, right, and justify n The first three values are defined by the HTML standard n the justify value is supported only by Internet Explorer © 2001 D & D Enterprises 29

Table Alignment n It is tedious to add the align attribute to each and every cell in your table n Like the bgcolor attribute, you can use the align attribute on individual <td> and <th> tags n n n also on <tr> tags to control the alignment of every cell in a table row Rewritten previous alignment example to control the alignment at the row level: align 2. html © 2001 D & D Enterprises 30

Alignment Tips n Words of warning: n You cannot use the align attribute on the <table> tag to affect the alignment of every cell in the table n n The <table> tag does accept the align attribute, but it uses it to control the alignment of the table with respect to the surrounding text, much the same way the <img> tag uses the align attribute To control alignment of every cell in your table, you'll need to set the align attribute on every row or every cell in your table © 2001 D & D Enterprises 31

VALIGN n By default, both Netscape's and Internet Explorer's CENTER attribute aligns contents vertically within the cell n n This vertical alignment is true for both header and data cells You can change this behavior by using the VALIGN attribute with the <td>, <th>, and <tr> tags n n Even better, the VALIGN attribute works with the <table> tag, allowing you to set the vertical alignment of every cell in your table with a single attribute The VALIGN accepts four values: top, middle, bottom, and baseline © 2001 D & D Enterprises 32

VALIGN="baseline" valign. html n n n The baseline of a font is the imaginary line upon which the characters rest If adjacent cells in a row have varying size text, the changing baseline between cells can make the table unattractive and difficult to read If you set the cell vertical alignment to baseline, the browser will find the lowest baseline of all the cells in the row and align all the text to that baseline n The result is a more readable table © 2001 D & D Enterprises 34

Table Alignment Tricks n n n Table alignment, especially horizontal alignment, is a great way to get alternative text alignment in a document Before the advent of HTML 4. 0 and Cascading Style Sheets, it was the only way to get rightaligned text Even now, table alignment is the most widely supported way to get certain effects ralign. html © 2001 D & D Enterprises 35

Text in Tables text. html n Since each cell within a table can be regarded as an independent formatting domain of its own, everything you already know about HTML tags that control the appearance of text in the Web browser continues to be valid n ANYTHING can go in a table cell! © 2001 D & D Enterprises 36

Table Alignment Attributes n The dynamic sizing of rows and columns by the browser raises some textpositioning issues that would be familiar to any spreadsheet user n The HTML 3. 0 specification addresses these with the additional attributes © 2001 D & D Enterprises 37

Table Alignment Attributes n The NOWRAP attribute turns off automatic text reflow within a cell n but it is a good idea to avoid using it, because it severely impairs the browser's ability to display the complete table attractively within the window limits and is deprecated n n http: //www. w 3. org/TR/REC-html 40/struct/tables. html#adefnowrap VALIGN controls the vertical alignment of text within a cell and can accept the values "top", "middle", "bottom", or "baseline” align 3. html © 2001 D & D Enterprises 38

Table Alignment Attributes <tr> n If the NOWRAP, ALIGN, or VALIGN modifiers are included

Table Alignment Attributes <td> n A NOWRAP, ALIGN, or VALIGN modifier in a <td> tag will apply to that cell only n n ALIGN or VALIGN in a <td> tag will override any ALIGN or VALIGN modifier in the enclosing <tr> tags The VALIGN="baseline" modifier makes sense only in a <tr> tag, because it causes the text in all the row's cells to be oriented to a single baseline n the usefulness of this particular feature isn't obvious until you get into some fairly complex tables © 2001 D & D Enterprises 40

Now that You Know VALIGN n n n The Popular left based layout Study popular. html Download bluebk. jpg Download seuss. gif Create a file called popquiz. html, using a table, to create the following: © 2001 D & D Enterprises 41

42

Table Captions <caption> a moving standard. . . © 2001 D & D Enterprises

Table Captions n Many tables exist as figures within a document and might benefit from a caption explaining the contents of the table n You can add a caption to your tables using the <caption> tag n The <caption> tag can appear anywhere within the<table> tag but should not be placed within a <tr> <td> or <th> tag captions. html http: //www. cyberbits. com/Tables/captions. htm © 2001 D & D Enterprises 44

Table Captions n n n By default, both Netscape and Internet Explorer center the caption above your table, wrapping the text to fit within the width of the table n The similarity between the browsers ends here. . Not everyone wants the caption centered above the table Both Internet Explorer 4. 0 and Netscape 4. 0 accept an align attribute for the <caption> tag that allows you to specify the caption position as either "top" or "bottom" n The caption, still centered, is moved to the appropriate position © 2001 D & D Enterprises 45

IE Caption Alignment n If you want to control the alignment of the caption content, IE accepts the following values for the ALIGN attribute: n "top" "bottom" "left" "right" n When the “left” or right” value is used, the caption remains at the top of the table, aligned to the requested edge of the table n If you want a right- or left-aligned table at the bottom of the table, IE accepts a separate attribute, VALIGN, that lets you control the vertical position of the caption n With valign, you can specify either "top" or "bottom" to move the caption to the right spot © 2001 D & D Enterprises 46

Table Captions © 2001 D & D Enterprises 47

Faking a Caption n There is nothing preventing you from creating captions without the <caption> tag n You can often create better positioned and formatted captions using conventional paragraphs before or after your table! n If you want to get really fancy, you can use nested tables to get the best effect © 2001 D & D Enterprises 48

Faking a Caption n Using tables to associate a caption with a table is a great example of the layout power of tables, especially when they are nested n Since a table and its caption are nothing more than two elements that need to be placed one above the other and kept together, a simple two-row, onecolumn table will do the trick nicely n n Turn the borders off on the containing table and use the table content alignment tricks discussed earlier to position the caption correctly Consider this for a component of your "wow-me" table assignment. . . © 2001 D & D Enterprises 49

Compelling Table Layouts Adding Graphics Using Colored Backgrounds Nesting Tables © 2001 D &

Colored Tables -- Why? n Use color to: n n Separate information Grab attention Go gestalt with your design and blend graphics to a different background Color a whole table or n color individual cells © 2001 D & D Enterprises 51

Color & Tables n Changing the background color of a table is easy n Add the bgcolor attribute to the <table> tag n The value of the attribute can be either a color name or a hexadecimal color value © 2001 D & D Enterprises 52

Colored Table -- try this table 2. html <table border="2" bgcolor="#ff 00 ff" > <tr> <td>cell #1</td> <td>cell #2</td> </tr> <td>cell #3</td> <td>cell #4</td> </tr> </table> Note: Clickable RBG Color Chart http: //www. printable. com/clut. html © 2001 D & D Enterprises 53

<table border="1" bgcolor="#ffff 00"> <tr> <th> </th> <th>oranges</th> IE vs. Netscape <th>grapefruit</th> n Netscape uses the color to paint the </tr> background of every cell in the <tr> table <th>flavor</th> n IE paints the cells, borders, and <td>sweet</td> empty cells the background color <td>tart</td> Warning: make SURE to test </tr> tables with background colors in <tr> <th>size</th> both browsers!! <td>small</td> <td>large</td> Save as: ctable. html </tr> </table> Colored Tables n n n © 2001 D & D Enterprises 54

Placing an Image Behind a Table -- Browsers Vary! Vary n n You can place an image behind a table using the BACKGROUND table attribute The attribute value is the image URL n If the image is larger than the table, it is clipped to the edges of the table n If the image is smaller, it is tiled to fill the table <table border="1" background="star. gif"> timage. html © 2001 D & D Enterprises 55

Coloring Table Rows n The <TR> tag can have the bgcolor attribute n n changes the background color for just one row within your table Save as crow. html © 2001 D & D Enterprises <table border="1"> <tr bgcolor="#ffff 00"> <th> </th> <th>oranges</th> <th>grapefruit</th> </tr> <th>flavor</th> <td>sweet</td> <td>tart</td> </tr> <th>size</th> <td>small</td> <td>large</td> </tr> </table> 56

Coloring Table Cells n Ultimate Control: Color each table cell! n Use the bgcolor attribute with any or all of the <TD> and <TH> table tag Save as: ccell. html © 2001 D & D Enterprises <table border="1"> <tr> <th> </th> <th bgcolor="#00 ffff">oranges</th> <th bgcolor="#00 ffff">grapefruit</th> </tr> <th bgcolor="#008000">flavor</th> <td bgcolor="orange">sweet</td> <td bgcolor="pink">tart</td> </tr> <th bgcolor="#008000">size</th> <td bgcolor="orange">small</td> <td bgcolor="pink">large</td> </tr> </table> 57

Using Color Well Use color to add to <table width="360” border="1" cellpadding="10” your message, grab bgcolor="#ffff 00"> attention <tr> n Try not to distract or <td align=“center”> annoy…. <b>make sure you read Try this notice!</b> n </td> effective. html © 2001 D & D Enterprises </tr> </table> 58

Table Spans ROWSPAN COLSPAN © 2001 D & D Enterprises 59

Spanning As soon as you start building home pages and menus with tables in lieu of the older list and image-map constructs, you will begin to wish you could merge adjacent cells either horizontally or vertically so that the amount of text in a single large cell will not dominate the appearance of the entire table © 2001 D & D Enterprises 60

Spanning n HTML 3. 0 provides this capability in the form of COLSPAN and ROWSPAN modifiers to the <td> tag n n The COLSPAN attribute takes a single numeric parameter that specifies how many columns the cell will span horizontally, proceeding toward the right The ROWSPAN attribute for a <td> tag works in an equivalent fashion but specifies how many vertical rows the cell will span, proceeding downward © 2001 D & D Enterprises 61

Web Pub I Review Slide: COLSPAN n A cell can span and stretch across a number of columns n If you want to add a dinner plate to the table arrangement and you want it to span two columns, you'd do that by using the colspan tag n To write this in HTML, simply add another row <tr> to your table and tell the cell to span two columns by adding colspan=2 to your td cell tag <tr><td colspan="2"></tr> © 2001 D & D Enterprises 62

Web Pub I Review Slide: ROWSPAN n Finish setting the table by adding a wine glass on the left and have it span two rows using the rowspan tag n To do this just add another cell and tell it to span two rows by writing rowspan="2" <tr rowspan="2"> © 2001 D & D Enterprises 63

Spanning n Proper coding of the COLSPAN and ROWSPAN attributes is a bit tricky, especially in the absence of sophisticated HTML editors that could let you design and set up the table visually and then generate the appropriate HTML tags to match © 2001 D & D Enterprises 64

Spanning n If you inadvertently specify columnspanning and row-spanning cells that somehow overlap and conflict, you can get unpredictable results n Any additional cells in a row or column that include a cell with a COLSPAN or ROWSPAN attribute may get pushed off the edge and disrupt the structure of the table ***SO you have been warned*** © 2001 D & D Enterprises 65

Table Spanning Commands n Create spanning cells across: n rows, columns, or both (rows and columns) n Spanning attributes defined for the <td> and <th> tags n COLSPAN creates a cell that spans two or more columns n ROWSPAN creates a cell that spans two or more rows n You can use these attributes together, creating a cell that spans rows and columns simultaneously © 2001 D & D Enterprises 66

Spanning: COLSPAN Notice that the first row of this table has only two cells. The first cell is empty, lining up with the empty cell in the beginning of the second row. The next cell has the COLSPAN attribute set to 2, causing it to span the next two cells in the next row. You can verify this by seeing that the cell containing "Fruit" spans the two cells containing "Orange" and "Grapefruit cspan. html <table border="1"> <tr> <th></th> <th colspan="2">Fruit</th> </tr> <th></th> <th>Oranges</th> <th>Grapefruit</th> </tr> <th>Flavor</th> <td>Sweet</td> <td>Tart</td> </tr> <th>Size</th> <td>Small</td> <td>Large</td> </tr> </table> 67

Spanning: ROWSPAN We can create a similar rowspanning cell by adding an additional column to the table: rowspan. html <table border="1"> <tr> <th></th> <th colspan=2>Fruit</th> </tr> <th></th> <th>Oranges</th> <th>Grapefruit</th> </tr> <th rowspan="2">Feature</th> <th>Flavor</th> <td>Sweet</td> <td>Tart</td> </tr> <th>Size</th> <td>Small</td> <td>Large</td> </tr> </table> 68

Rowspans span. html more complicated. . . n Rowspans create a new column (when we insert a rowspanning cell) and we have to add corresponding cells to every other row, except the rows corresponding to the spanning cell n Checking the HTML, we added another blank cell to the first two header rows, and the spanning cell to the third row n We did not add another cell to the fourth row, since its first cell is actually the spanning cell from the preceding row n The fourth row already has four cells: the first comes from the third row, and the remaining three are explicitly defined © 2001 D & D Enterprises 69

Rowspans span. html more complicated. . . n n You need to be careful when defining tables with multiple spanning rows and columns Make sure you count columns carefully, ensuring that the right cells line up with the corresponding spanning cells © 2001 D & D Enterprises 70

Span 2. html n The span. html table has four empty cells in the upper left corner, corresponding to the two header rows and header columns n We specified all four cells explicitly, but could have used just one cell, spanning both rows and columns If the first cell in the first row were defined as: <TH COLSPAN="2" ROWSPAN="2"></TH> the cell would span the first two cells of the first two rows see n span 2. html © 2001 D & D Enterprises 71

HTML 4. 0 Table Changes Table Headers and Footers Table Body Table Rows &

Table Headers and Footers n When tables are printed and broken across several pages running headers and footers are very useful n HTML 4. 0 introduces the concept of a table header, footer, and one or more table body sections n n Ideally, the browser would repeat the table header and footer on each page when a table is printed In addition, you can use the groups attribute of the <table> tag to change the way rules are drawn between the different sections of your table -- we have already looked at this MS IE 4. 0 only RULES attribute © 2001 D & D Enterprises 73

<thead> n The <thead> tag defines the table header n It contains one or more <tr> tags that define the rows in the header n You can use the ALIGN and VALIGN attributes with the <thead>tag to control the alignment of content within the header cells, much like you use these tags in the <table> tag to control cell alignment. © 2001 D & D Enterprises 74

<tfoot> n The <tfoot> tag works just like the <thead>, except that it defines the table footer instead of the header n The <tr> tags inside the <tfoot> tag defines the number of rows that make up the table footer © 2001 D & D Enterprises 75

<tbody> n Any rows not in the header or the footer are considered part of the table body n n You can create multiple sections within your table body by using the <tbody> tag Again, you can use the ALIGN and VALIGN tags to control the alignment of the cells within these body sections © 2001 D & D Enterprises 76

Table Row Groups (4. 0) n Tables may now be grouped into rows consisting of one table head <thead>, one table foot <tfoot> and one or more table body <tbody> sections n Each group must contain at least one row n The THEAD and TFOOT should contain information about the table's columns n n Their start tags are required, but their end tags may be omitted In order for browsers to render the foot of the table before the body, the TFOOT element should appear before the TBODY element in the table © 2001 D & D Enterprises 77

Row Groups (IE Only) Only <table rules="groups"> <thead>. . . header rows go here <tbody>. . . rows in the first section go here <tbody>. . . rows in the second section go here <tbody>. . . rows in the third section go here <tfoot>. . . footer rows go here </table> theadfoot. html & theadfoot 2. html © 2001 D & D Enterprises 78

Table Column Groups n Remember we said that the HTML table model is row-oriented: n n You create a table as a series of rows, each of which contains a series of cells. This makes it easy to create row groups, since you can easily group adjacent <tr> tags to create a group. © 2001 D & D Enterprises 79

Table Column Groups n n n Column grouping is more difficult, since the corresponding cells that make up a column are spread throughout all the rows in the table In order to create column groups, you must use special tags to define those groups before you define the rows and cells of your table You do this with the <colgroup> tag © 2001 D & D Enterprises 80

<colgroup> n n The <colgroup> tag appears inside the <table> tag It accepts four attributes: n "align", "valign", "width" and "span" n n ALIGN and VALIGN are used to specify the content alignment of the cells in this column group, much like they are used to control general cell alignment when used in other table tags The WIDTH attribute specifies the width of the cells, either as a percentage of the table or as an absolute number of pixels © 2001 D & D Enterprises 81

<colgroup> cols. html n n By default, the <colgroup> tag defines a column group containing just one column The first tag affects the first column of the table, the second controls the second column, and so forth. n If you wanted all the cells in the first column of your table to be aligned to the right you would use code like this: © 2001 D & D Enterprises <table> <colgroup align="right"> </colgroup>. . . table rows go here </table> n The above is the same as adding ALIGN=“right” to the first cell of every row in your table 82

<colgroup> SPAN n Column groups can contain more than one column n You indicate this with the SPAN attribute n n If you wanted the first three columns to be right aligned, you simply add span=“ 3” to the <COLGROUP> tag You can create multiple column groups by using several <colgroup> tags © 2001 D & D Enterprises <table> <colgroup align="right" span="3"> </colgroup> <colgroup span="4" width="50"> </colgroup>. . . table rows go here </table> 83

Individual Columns <col> n You can use the <colgroup> tag to handle a range of similar columns n n If some columns within the group have to be handled differently you use the <col> tag The <col> tag lets you control individual columns in a column group n If you have four columns you want to have grouped with a rule around them but the individual columns require different widths and alignment use the <colgroup> tag to group them, and the <col> tag to handle each column © 2001 D & D Enterprises <table rules="groups"> <colgroup> <col align="left" width="20"> <col align="right" width="10"> <col width="35"> </colgroup>. . . other colgroups go here, followed by table rows </table> 84

More on Columns n Tables, as you may have noticed are both complex and tricky. n n The cool thing about HTML is that there always multiple way to achieve the same results. Type in the code on the next page to see a non-background way to achieve the popular left navigation scheme © 2001 D & D Enterprises 85

Save template. html as leftnav. html © 2001 D & D Enterprises 86

Table Reference Site c|net builders. com advanced table tips: http: //builder. cnet. com/Authoring/Adv. Html/ss 01. html n Spend some time at home getting familiar with table layout options! © 2001 D & D Enterprises 87

Complex Table Tricks Nesting Including Graphics © 2001 D & D Enterprises 88

Nesting Tables for Effect n For a more complex table layout n n you can use different colors and shapes Sample will have three tables n n top table technoweenie logo graphic to create overlapping squares divide table into 3 columns NOTE: cellpadding and cellspacing must be ” 0” so there is no gap between color spaces Tables with no content can use © 2001 D & D Enterprises 89

Loads in 3. 7 seconds with a 28. 8 modem http: //www. internetsd. com/courses/ html/ntable. html http: //www. internetsd. com/courses/ html/ntable 2. html n this one has borders turned on © 2001 D & D Enterprises 90

Nested Tables n The larger the table the longer it takes to load n n n Your page won’t show until the final closing </table> tag is read by the browser So, try to break tables up into sections Make the first table small so it loads quickly and the user will have something to see while the rest of the page loads © 2001 D & D Enterprises 91

Nested Tables n n Nest a complete table within a table Hint: use comments to help yourself keep track! http: //www. internetsd. com/courses/ html 2/nested. html http: //www. internetsd. com/courses/html 2/commente d_tables. html Not commented: n n http: //downtime. com/new/custquot. htm http: //libweb. uoregon. edu/janus. html © 2001 D & D Enterprises 92

Nested Tables n n http: //campus. fortunecity. com/computing/100 /600530. html http: //libweb. uoregon. edu/janus.

Nest Tables n When creating a nested table, you should first create the outer table and then go back and create the inner table(s) n When inserting the inner table, you create a completely new table after the opening <td> tag n The inner table must be closed before the closing </td> tag of the outer table © 2001 D & D Enterprises 94

Nest Tables n http: //libweb. uoregon. edu/janus. html n n n See nested_three. html See colored_nested. html This is the tip your textbook author is talking about to learn to deconstruct tables! © 2001 D & D Enterprises 95

Tables & Graphics n Designers sometimes use workarounds when displaying big images n They cut up the big image and put them in tables, giving the illusion that the image is loading faster than one huge graphic n Programs such as Macromedia's Fireworks automate this imageslicing but you can do it on a budget! n n More info: http: //dreamink. com/speed 5. shtml Example: n http: //www. nu. edu/ © 2001 D & D Enterprises 96

More? n Tables Tutorial n http: //www. pagetutor. com/pagetutor/tables /index. html © 2001 D

Wow Me Tables n Design Ideas for HTML Tables n This is what tables were MEANT to do!! http: //www. botany. hawaii. edu/tables/default. htm n Scholarly tables discussion n http: //www. sunworld. com/sunworldonline/s wol-05 -2000/swol-05 -webmaster. html © 2001 D & D Enterprises 98