1 / 45

Lesson 7

Lesson 7. Tables. Table Tags and Attributes. Tables. HTML tables are used in two main ways: To organize tabular data in a familiar spreadsheet-like way.

cortez
Download Presentation

Lesson 7

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

  2. Tables Table Tags and Attributes

  3. Tables HTML tables are used in two main ways: • To organize tabular data in a familiar spreadsheet-like way. • To allow for more attractive layout of web page content, giving the designer more control over what goes where.The borders of the tables do not usually show in this case, and it is not obvious that the page content is in table cells.

  4. Using tables to display data • Borders may or may not be used, but the data retains a table-like appearance, which makes it easy to read.

  5. Table Tags There are five main tags used with tables. These tags are supported by both IE and Netscape. They are; • <table></table> • <caption></caption> • <tr></tr> (table row) • <td></td> (table data) • <th></th> (table header)

  6. Table Tags Most often, you will only need to use three tags; • <table></table> • <tr></tr> (table row) • <td></td> (table data)

  7. Table Terminology

  8. Example 1 • <html> • <head> • <title>Example 1</title> • </head> • <body> • <h3>Table example 1</h3> • <!-- start of table --> • <table> • <tr> • <td>cell 1</td> • <td>cell 2</td> • </tr> • <tr> • <td>cell 3</td> • <td>cell 4</td> • </tr> • <tr> • <td>cell 5</td> • <td>cell 6</td> • </tr> • </table> • <!-- end of table --> • </body> • </html>

  9. Example 1 (continued) • Note how the data is arranged in a table of three rows and two columns, but it does not look like a typical table, because there are no borders.

  10. Example 2 • <html> • <head> • <title>Example 2</title> • </head> • <body> • <h3>Table example 2</h3> • <!-- start of table --> • <table border="1"> • <tr> • <td>cell 1</td> • <td>cell 2</td> • </tr> • <tr> • <td>cell 3</td> • <td>cell 4</td> • </tr> • <tr> • <td>cell 5</td> • <td>cell 6</td> • </tr> • </table> • <!-- end of table --> • </body> • </html>

  11. Example 2 (continued) • The previous slide looks more like a table or spreadsheet, because of the border • The border is added by specifying an integer greater than zero, which will give the width of the border in pixels

  12. Example 2 (continued) • A default value of 2 is used for cellspacing, and a default of one is used for cellpadding • Various combinations of border thickness, cellspacing, and cellpadding can be observed by using the JavaScript program available at http://javascript.internet.com/miscellaneous/table-maker.html

  13. Example 3 • <h3>Table example 3</h3> • <!-- start of table --> • <table border="5" cellspacing="5" cellpadding="5"> • <caption>This is an example</caption> • <tr> • <th>&nbsp;</th> • <th>column 1</th> • <th>column 2</th> • </tr> • <tr> • <th>row 1</th> • <td>cell 1</td> • <td>cell 2</td> • </tr> • <tr> • <th>row 2</th> • <td>cell 3</td> • <td>cell 4</td> • </tr> • <tr> • <th>row 3</th> • <td>cell 5</td> • <td>cell 6</td> • </tr> • </table> • <!-- end of table -->

  14. Example 3 (continued) • The previous example shows all of the table tags used • The head and body tags were omitted to save space on the slide • Note how the caption appears above the table by default • Note how the text in the table header cells is automatically bolder

  15. <caption> • The caption tag has an attribute called align. • You can use it to put the caption above or below the table, e.g. <caption align=“top”> (default) <caption align=“bottom”>

  16. <table cols= > • The table tag has an attribute called cols, which allows you to specify how many columns the table will have • Using this attribute will help speed the display of your table, because the browser does not need to read the entire piece of source code, counting the <tr> tags, before it knows how to start drawing the table.

  17. Empty cells • The next table has 5 columns, and 10 rows. • Cellpadding and cellspacing are set to 0, and the border is set to 1. • The table does not look right because there are no non-breaking spaces (&nbsp;) in the empty cells, to preserve the table integrity.

  18. Empty cells (continued) • <table width="72%" border="1" cellspacing="0" cellpadding="0"> • <caption>Table with empty cells - no non-breaking spaces</caption> • <tr> • <td></td> • <td>fgdhd</td> • <td>fdsf</td> • <td></td> • <td>fdsfds</td> • </tr> • <tr> • <td>fds</td> • <td></td> • <td></td> • <td>hfgd</td> • <td></td> • </tr> • <tr> • <td></td> • <td>fdfd</td> • <td>fdgg</td> • <td></td> • <td>fgd</td> • </tr> • </table>

  19. Empty cells (continued) • The next table is the same as the previous one, but with non-breaking spaces (&nbsp;) acting as placeholders for the cells, preserving the internal borders.

  20. Empty cells (continued) • <table width="72%" border="1" cellspacing="0" cellpadding="0"> • <caption>Table with empty cells - no non-breaking spaces</caption> • <tr> • <td>&nbsp;</td> • <td>fgdhd</td> • <td>fdsf</td> • <td>&nbsp;</td> • <td>fdsfds</td> • </tr> • <tr> • <td>fds</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>hfgd</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>fdfd</td> • <td>fdgg</td> • <td>&nbsp;</td> • <td>fgd</td> • </tr> • </table>

  21. Table tags A table is defined by the tags <table> </table> <table border = "1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr></table> Inside a table row you can put table headers, table rows, and table cells. And can have the following attributes: • border="n" n=number of pixels (Size of  border around the cells) • Summary text (Summary of this table for speech-synthesizing/non-visual browsers) • cellpadding="n" • cellspacing="n"

  22. Tables The TD tag sets are individual sections that are contained within a TR tag set which are contained within a TABLE tag set. The <tr> and </tr> tags define a row of a table. The <th> and </th> tags define the table header cells. The <td> and </td> tags define the table data cells.

  23. Tables align="alignment" alignment =left, right, or center valign="alignment" alignment =top, middle, or bottom col span="n" n=the number of columns to span rowspan="n" n=the number of rows to span nowrap=nowrap width="n" n=the number of pixels or percentage (n%) height="n" n=the number of pixels or percentage (n%) hspace="n" n=the number of pixels vspace="n" n=the number of pixels

  24. Border and a Caption A border attribute can be defined as follows: <table border="border"> You can change the border attribute setting in order to modify the width of the border surrounding a table An optional caption can be defined for a table by using the caption tag. <caption>Sample Table</caption> Use the caption tag to place explanatory text about a table near the table. (note :IE NN)

  25. Background colours • To display background colors in table cells use the bgcolor attribute. • The attribute bgcolor applies to the <table>, <tr>, <td>, and <th> tags. • Background colours can be set within the table as a whole, for an individual row, and for an individual cell. • Background colours should be used to make the table and its information more readable and useable.

  26. Background colours • Setting the background colour of an individual cell will override the background colour that has been set for that row or for the entire table. • Setting the background colour for a row will override the background colour set for the entire table. • Setting the background colour for an entire table will override the background colour set for a page. • Note that the bgcolor attribute uses the American spelling of the word. • Example

  27. Alignment, Height & Width You can align data within a cell horizontally and vertically: <td align="left" valign="top"><img src=“ " alt="server on left" height="36" width="36" /></td> Width and Height: To change the display size of a table:

  28. Cellspacing and Cellpadding To change the width of column and row border use the cellspacing attribute. This defines the space between cells. <table border cellspacing="10"> To change the amount of space between the edges of the cells and the cell’s contents use the cellpadding attribute <table border cellpadding="10">

  29. Spanning Rows and Columns To span multiple rows and columns: <th colspan=2>xxx</th> <th rowspan=2>xxx</th>

  30. <td colspan= > <td rowspan= > • The colspan and rowspan attributes work the same way for <th> as they do for <td>. • When adding colspan or rowspan, you must remove the individual cells that will be occupied by the expanded cell, as shown in the following examples.

  31. Original table • <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0"> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • </table>

  32. <td colspan= > (wrong) • <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0"> • <tr> • <td colspan="3">&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • </table>

  33. <td colspan= > (corrected) • <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0"> • <tr> • <td colspan="3">&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • </table>

  34. <td rowspan= > (wrong) • <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0"> • <tr> • <td colspan="3">&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td rowspan="3">&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • </table>

  35. <td rowspan= > (corrected) • <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0"> • <tr> • <td colspan="3">&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td rowspan="3">&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • <tr> • <td>&nbsp;</td> • <td>&nbsp;</td> • <td>&nbsp;</td> • </tr> • </table>

  36. thead, tbody, tfoot To specify the head section of a table use the <thead></thead>. The <tbody></tbody> tags are used to specify the body section of the table and are similar to the <body> element of an HTML document. The <tfoot></tfoot> tags are used to specify the footer section of the table. If you use the thead, tfoot and tbody elements, you must use every element, but you can leave them blank They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element. The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. This should change in future.

  37. The COL Tag The <col> tag is used to specify the alignment for an entire column. Use this element when you want to specify different attribute values to a column inside a colgroup.

  38. COLGROUP <COLGROUP> .. </COLGROUP> This tag is used to group together columns in a table. It allows you to treat the columns in your table similarly to the rows, including rule lines to differentiate the columns. It goes at the beginning of the table, before the content.

  39. Using tables for page layout • Practically every professional site today uses tables to present an attractive layout • It is a way to break a page up into sections, and control the content within each section. • Tables allow content to take a familiar form, similar to magazine or newspaper layout

  40. Using tables for page layout • Tables can be nested multiple times, so that the cell of a table contains a second table, and a cell of the second table contains a third table, although good planning should minimize nesting to keep the code simple. • The following example will build a page using several tables, and tables within the cells of other tables

  41. Using tables for page layout Pay particular attention to how the following features of tables apply when they are used for layout; • Table width, height • Background color • Table row alignment • Table data width, and alignment • Each new table added will be shown in bold type in the source code

  42. Layout design • When using tables for layout, the first thing you should do is plan your layout using a pencil and paper. • Decide on the placement and proportions needed before you start writing code.

  43. Layout design • Try to avoid nesting tables more than two levels deep, since they will be easier to work with. • With a more complicated design involving nested tables, it can be helpful to create each table separately to get the layout right, and then put the tables together.

  44. mmmmm mmmmm mmmmm

  45. Review <THEAD> .. </THEAD> This tag defines the enclosed rows as the header rows of the table. If the table is broken across several physical pages (such as when printing), the header rows will be repeated. <TFOOT> .. </TFOOT> This tag defines the enclosed rows as the footer rows of the table. If the table is broken across several physical pages (such as when printing), the footer rows will be repeated. <TBODY> .. </TBODY> This tag divides your table into discrete sections. Each section is delimited with a rule line.

More Related