1 / 47

Tables

Tables. Learn to create and enhance TABLES using a variety of attributes and formats. TABLES. Tables allow you to POSITION elements on a web page. Tables. Tables make web pages look more organized and professional. The borderless TABLE. DRAMA Club.

navid
Download Presentation

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. Tables Learn to create and enhance TABLES using a variety of attributes and formats.

  2. TABLES • Tables allow you to POSITION elements on a web page.

  3. Tables • Tables make web pages look more organized and professional.

  4. The borderless TABLE DRAMA Club • Creates a BANNER into which you can insert TEXT.

  5. TABLE ELEMENTS • Tables consist of ROWS and COLUMNS and CELLS.

  6. Rows • A Row is a horizontal line of information.

  7. A Column • A Column is a vertical line of information

  8. Cell • A CELL is the inter section of a row and column.

  9. Building Tables • Cells have TWO VARIATIONS: • Headings and DATA

  10. Heading Cells • Heading Cells display BIG and Black and BOLD

  11. Data Cells • Data Cells display little and plain and normal.

  12. OTHER Parts of a TABLE • Table Border • Table Header • Table Captions

  13. Table Borders • Table Borders are lines that go around the perimeter of a table.

  14. Table Headers • Table Headers are BOLD TEXT that indicate the purpose of the ROWS and Columns.

  15. A Table Caption • A Table Caption is text that describes the purpose of a table. This table needs something else . . . Color !

  16. Planning, designing and coding • Creating Tables is a THREE step process • Planning • Designing • Coding

  17. Planning Do you REALLY need a table? • If you can explain the Web Page using ONLY paragraphs and Bulleted lists. You don’t need a table.

  18. A Table is appropriate when • You need to organize data so that it is easier for the reader to understand. • The TABLE gives the web page a more professional look and • More clearly explains the topic.

  19. PLANNING the table • Begin with a good design • Sketch out on paper before writing the HTML code.

  20. The Big Race • How many rows? • How many columns?

  21. http://www.davesite.com/webstation/html/chap12.shtml • http://www.davesite.com/webstation/html/chap12.shtml

  22. Coding the Table • <table border=4> • <tr> • <th>What are tables used for?</th> </tr> • <tr> • <td>Tables are used to make data easier to interpret or to just give your document more impact.</td> • </tr> • </table>

  23. Start the TABLE • Tables are one of the most challenging things to code with HTML. • Tables start with the <table> tag, and • usually contain the border=n attribute within the opening tag. <table border=4>

  24. Invisible borders • If the border=0, than the table's border is invisible. • Usually when you do not use the border attribute the table border will become invisible.

  25. Invisible borders This is useful when you want to align text in rows and columns, but don't want a table border around it. • border=1 is a thin border. • border=2 is a little thicker, • border=3 a little more thick.. and so on.

  26. This table has a border of 0. <table border=0> <tr> <td>This table has a border of 0.</td> </tr> </table> This table has a border of 3. <table border=3> <tr> <td>This table has a border of 3.</td> </tr> </table> Example of tables with borders...

  27. Each Row is defined • Each row within the table is defined by the opening <tr> tag and the optional </tr> closing tag. <tr> </tr>

  28. Within each row…table cells • Within each table row are table cells, which are defined by the <td> opening and </td> closing tags. <td> </td> Most table rows contain more than one cell.

  29. Heading Tags • Many times, you will need a heading for a column of cells of the first row. • To do this, you will use the <th> opening and </th> closing tag. <th> </th>

  30. Heading Tags • The table heading tag makes the text in that cell BOLD and CENTERED. • You only need use the heading cells when necessary.

  31. <table border=2> <tr> <th>Heading A</th><th>Heading B</th><th>Heading C</th> </tr> <tr> <td>Cell A</td><td>Cell B</td><td>Cell C</td> </tr> <tr> <td>Cell D</td><td>Cell E</td><td>Cell F</td> </tr> </table>

  32. Example of Multiple Rows and Columns

  33. ROWSPAN=2 <table border=2> <tr> <th>Heading A</th><th>Heading B</th> <th>Heading C</th> </tr> <tr> <td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td> </tr> <tr> <td>Cell E</td><td>Cell F</td> </tr> </tr> </table>

  34. ROWSPAN • Notice how the rowspan=2 attribute was added. • This allows that cell to span two rows.

  35. colspan=n • If you want a cell to span more than 1 column, use the colspan=n attribute.

  36. The ALIGN attribute • you may wish to use the ALIGN and VALIGN attributes to align the contents of cells. <TD> ALIGN=LEFT, ALIGN=CENTER or ALIGN=RIGHT </TD>

  37. Vertical Allignment • If you wish to change the vertical alignment of the contents of a cell, <TD> VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM attributes. </TD>

  38. Width Attribute • You may also want to try out the WIDTH=n% attribute, to change the width of a table or a cell.<table border=1 width=100%>

  39. <table border=1 width=100%> <tr> <td align=left>Left Alignment</td> <td align=center>Center Alignment</td> <td align=right>Right Alignment</td> </tr> </table>

  40. <html><head><title>Title goes here</title></head><body bgcolor="#AABBCC"><h1 align=right>Body goes here</h1><hr><center><h3>Headings are kewl!</h3></center><hr size=10><table border=2 width=75%><tr><td>Tables</td><td>give</td><td>impact!</td></tr></table></body></html>

  41. Coding the Table <TABLE> </TABLE> • Indicates the beginning and end of the table. • All other tags go within these tags.

  42. Here comes a ROW !! <TR> </TR> • Indicates the beginning and end of a table ROW • Rows consist of headings or data cells

  43. Table Heading Cell <TH> </TH> • Indicates the beginning and end of a table heading cell. • Heading cells default to Bold and center alignment. • Heading Cells have macho ATTITUDE !!

  44. Table Data <TD> </TD> • Indicates the beginning and end of a table data cell. • Data cells default tonormal text with left alignment. • Data cells are normal and ordinary.

  45. Table ATTRIBUTES <TABLE></TABLE> • ALIGN (LEFT, RIGHT, CENTER) • BGCOLOR • BORDER • CELLSPACING (between cells) • CELLPADDING (within cells) • COLS • WIDTH (relative to window width)

  46. Table Row Attributes <TR> </TR> • ALIGN (LEFT, CENTER, RIGHT) • BGCOLOR • VALIGN (TOP, MIDDLE, BOTTOM)

  47. Table Header Attributes <TH> and </TH> • ALIGN (LEFT, CENTER, RIGHT, JUSTIFY) • BGCOLOR • COLSPAN (sets number of columns spanned by cell) • ROWSPAN(sets number of columns spanned by cell) • VALIGN (vertically aligns cell) • (TOP, MIDDLE, BOTTOM)

More Related