1 / 104

HTML Tables

Learn how to create sophisticated and responsive HTML tables for improved page layout. Understand table attributes, cell alignment, and best practices.

contrerasr
Download Presentation

HTML Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook Chapter 9 Run the Chapter Examples!!

  2. About Tables • 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 • You create a table by defining rows, one at a time • 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.

  3. 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

  4. Table Display • 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 • 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

  5. About Tables • The browser collects all of the table cells, adjusts their sizes so they fit together and creates a row • After all of the rows are assembled the browser collects all of them together and creates the complete table

  6. About Tables • 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: • One to size the individual cells and rows, and • another to display the final table after making any adjustments

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

  8. About Tables • This two-pass behavior is a real pain, making your documents display slowly and erratically • 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 • So, use the correct 4.0 <!Doctype> statement!!

  9. Table Review URL: http://204.98.17.1/learnhtml/56tables.htm Simple Table Review • An HTML table is contained in the <table> and </table> tags • 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 • 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

  10. Simple Table Review A tag pair for table headings<th> and </th>is essentially the same as the<td> and </td> tagsexcept that <th> formats text with emphasized and centered attributes

  11. Simple Table Review • By default, tables do not have any borders or gridlines • 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>

  12. Simple Table Review • You cannot independently control the table's border and gridlines • 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

  13. Simple Table Review • Open template.html in HomeSite save it as table1.html • Add the Title text: Table Review • After the opening <body> tag add the following: <table border> <tr> <td>this is cell #1</td> <td>this is cell #2</td> </tr> </table>

  14. Page Layout: Tables • Tables also were not designed for layout per se • 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

  15. In homesite, rename template.html 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> Page Layout: Tables

  16. Using Tables for Advanced Page Layout Width is a Key Attribute

  17. Table Width • Sometime you want to control the absolute or relative width of the table within the browser window • HTML Tables supports this functionality with the WIDTH modifier, which you can apply to any of the <table>, <th>, or <td> tags • 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 width.html

  18. Width • Setting table width is an important concept if you consider screen size… • 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 • This is a very common Web page layout technique • BUT! What width to make the table?????????

  19. What Size Should I Design My Page? • So, do you develop for 640x480 or 800x600 • How do you make up your mind? http://hotwired.lycos.com/webmonkey/99/41/index3a_page3.html?tw=design • What is the "sweet spot" • Non-scrolling region

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

  21. Width for Columns • Here is a basic two-column layout using a <TABLE> that has a single table row with three data cells: • 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 columns.html

  22. Another Width: Sideheads • The text-heading features available in HTML are the <H1> through <H6> tags • 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 • Here is a fairly fancy pair of side heads: sides.html

  23. Using Width for Your Layout • Using Tables to do Page Layout • http://www.html.about.com/compute/html/library/beginning/bl_begin011000a.htm

  24. Advanced Page Layout: Tables • Tables can be good for placing images relative to each other within the browser window • Occasionally you will notice that browsers don't do exactly what you thought you told them • 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 • There are quite a few major sites whose download time suggests that the designers have not tested with slower modems and computers

  25. Troubleshooting Advanced Layouts • Microsoft Developers Network • http://msdn.microsoft.com/workshop/design/layout/facts1.asp#IMAP

  26. Table Alignment Text Attributes Table Attributes

  27. 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 • If you want to change this behavior, use the ALIGN attribute with the appropriate cell tag • The align attribute accepts one of four values: • left, center, right, and justify • The first three values are defined by the HTML standard • the justify value is supported only by Internet Explorer

  28. Table Alignment • It is tedious to add the align attribute to each and every cell in your table • Like the bgcolor attribute, you can use the align attribute on individual <td> and <th> tags • 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: align2.html

  29. Alignment Tips • Words of warning: • You cannot use the align attribute on the <table> tag to affect the alignment of every cell in the table • 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 rowor every cell in your table

  30. VALIGN • By default, both Netscape's and Internet Explorer's CENTER attribute aligns contents vertically within the cell • 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 • 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

  31. VALIGN="baseline" valign.html • 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 • The result is a more readable table

  32. Table Alignment Tricks • 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 right-aligned text • Even now, table alignment is the most widely supported way to get certain effects ralign.html

  33. Text in Tables text.html • 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 • ANYTHING can go in a table cell!

  34. Table Alignment Attributes • The dynamic sizing of rows and columns by the browser raises some text-positioning issues that would be familiar to any spreadsheet user • The HTML 3.0 specification addresses these with the additional attributes

  35. Table Alignment Attributes • The NOWRAP attribute turns off automatic text reflow within a cell • 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 • http://www.w3.org/TR/REC-html40/struct/tables.html#adef-nowrap • VALIGN controls the vertical alignment of text within a cell and can accept the values "top", "middle", "bottom", or "baseline” align3.html

  36. Table Alignment Attributes <tr> • If the NOWRAP, ALIGN, or VALIGN modifiers are included in a <tr> tag, they will affect all the cells in that row

  37. Table Alignment Attributes <td> • A NOWRAP, ALIGN, or VALIGN modifier in a <td> tag will apply to that cell only • 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 • the usefulness of this particular feature isn't obvious until you get into some fairly complex tables

  38. Now that You Know VALIGN • 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:

  39. Table Captions <caption> a moving standard...

  40. Table Captions • Many tables exist as figures within a document and might benefit from a caption explaining the contents of the table • You can add a caption to your tables using the <caption> tag • 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

  41. Table Captions • By default, both Netscape and Internet Explorer center the caption above your table, wrapping the text to fit within the width of the table • 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" • The caption, still centered, is moved to the appropriate position

  42. IE Caption Alignment • If you want to control the alignment of the caption content, IE accepts the following values for the ALIGN attribute: • "top" "bottom" "left" "right" • 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 • 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 • With valign, you can specify either "top" or "bottom" to move the caption to the right spot

  43. Table Captions

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

  45. Faking a Caption • Using tables to associate a caption with a table is a great example of the layout power of tables, especially when they are nested • 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, one-column table will do the trick nicely • 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...

  46. Compelling Table Layouts Adding Graphics Using Colored Backgrounds Nesting Tables

More Related