Introducing Web Page Tables

1. Introducing Web Page Tables CIS67 Foundations for Creating Web Pages Professor Al Fichera Updated on: September 4, 2010

2. What This Lecture Covers • In the first lecture on HTML Tables I will introduce the basic tags that will be used. • Learn how to control Web page layout and alignment with Tables. • Use Background Colors and Images. • Use Cellpadding and Cellspacing Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

3. Creating a Simple Table • The key thing to remember about tables in HTML is that they are first organized in rows, which go horizontally from left to right. • Note: There are many HTML editors such as Dreamweaver that will create tables for you, but it pays to know some of the codes and how they are used. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

4. Creating Basic Table Code • There are very few tags needed to create a basic Web Table, and that's a good thing! • Basic Table Tags include: • <table> Tag closes with </table> • <tr> Table Row closes with </tr> • <td> Table Data closes with </td> • border="" Closing not needed • cellspacing="" Closing not needed • cellpadding="" Closing not needed Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

5. Working with Rows & Columns • After your starting <table>tag you can begin your first ROW. <tr> • Each COLUMN in the ROW begins and ends with these tags: <td> </td> • If there were to be four columns in your table, you'd have four sets of <td> </td> before you'd close the ROW </tr> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

6. Headings for your Tables • Table headings are created using the double-sided <th> </th>tag pair. • Expect the data between these tags to be in a Bold Face and Centered as well. • You may use the Table Heading tag in any Row or Cell in the Table as you wish. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

7. Preferred Table Syntax • HTMLers generally have a certain style in which they write the Table code. • Indentation helps organize your table data and makes debugging a snap! • Use the next slide for a guide. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

8. Table Syntax <table> <tr> <td> Place your data or image here. </td> </tr> </table> By placing all like-type codes in a column-wise fashion helps you find missing or incorrect code quickly. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

9. Helpful Tips Building Tables • Here is something we've all used for years when building a table from scratch, even if we use Dreamweaver or FrontPage to keep it straight. • Use the first letter 'R' to stand for Row. • Use the first letter 'C' to stand for Column. • the following, each in it's own cell. • If you have four columns in the 1st and 2nd row, you would use R1C1 R1C2 R1C3 R1C4 • R2C1 R2C2 R2C3 R2C4 Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

10. Interesting Note on Tables • Tables are like rubber bands, they can stretch in any direction to fit the contents of your table. • A table cell will stretch horizontally and rescale all the cells in the ROW before it decides to use the WRAP attribute for the cell with the most content. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

11. Tables Auto-Resize Content • If you do not advise the table about the width of the cells, it will Auto-Resize. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

12. Gaining Control Over Width • You can control the overall size and appearance of your table using the absolute widthattribute. • Be aware: What will a 400 pixel wide table look like in a 640x480, 800x600, or 1024x768 Browser Window? • To force a table to be exactly 400 pixels wide, type <table width="400"> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

13. Table Width by Percent • Why not make your table width to be relative to the space between the left and right margins of the users browser window? • This means that the table will resize along with the Web browser. • A "Stretchy Table" example is shown next. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

14. Stretchy Tables Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

15. Table Column Widths • You can apply Width settings to Columns by placing the width attribute inside the <td> or <th>tags. • You can use absolute (pixels) or relative (%) numbers if you wish. • To set a column width to one-half the total width of the table, type <td width="50%"> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

16. Column Width Tip • Create a single row that contains no other content except for Column Width information. • Can be placed at the end of the table and will look like a blank row. • You could add a comment such as the following to identify this row: <!-- This row contains Width controls --> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

17. Column Width Rules <table> <tr> <td width="n"> </td> <td width="n"> </td> <td width="n"> </td> </tr> Column widths must be set in only one cell per column. Note: You can choose to repeat for each row or not to repeat the width. Note: "n" stands for the number to be used for the width, whether relative or absolute. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

18. Taking Width Control • This table example is controlled by a single row of columnwidthas the first row, if you look closely, you can spot a bit more room at the top. • A better place to put this code would have been as the last row, it would be less evident since it's nature for the eye to like to see more space at the bottom of a picture than the top. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

19. Column Width Idea • Use an invisible graphic as a control for the column width. • An invisible GIF is a 1 pixel square without any color, and can be made in any graphics program. • Browsers treat tables quite differently and this might even the score a bit for you. • Your code might look like this: <td><img src="invisible.gif" width="n" height="n" /></td> • The Height attribute tag can be omitted to allow for the natural expansion of the cell. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

20. 3 Invisible Gif Screen Shots <td><img src="invisible.gif" width="120" height="100"></td>(Table Width set at 600 pixels.) Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

21. Formatting Text in Tables • Each cell of a table can be formatted independently of the others. • You can use the standard markup tags for text such as <b>, <i> and <strong>. • You can also include line breaks within each table cell by using the <br /> tag or a paragraph tag <p>. • However, you should use CSS to Style your Table, it will save a lot of extra work for you. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

22. Aligning Text Within Tables • Because we are using the English language for our Browsers, text is aligned on the left side of the Table, however, placed in the Middle of the cell. • You must tell the individual cell to align the text to the top, unless you are happy with the middle placement. • CSS applied for the table can override this if needed. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

23. Alignment in HTML Tables • There are nine (9) divisions that can be addressed for every table and in every table cell. • Imagine a individual table cell looking somewhat like a tic-tac-toe board. • We can name eachof these divisions. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

24. Alignment in HTML Tables • The three (3) HTML Horizontal alignments are addressed as align=" • left | center | right • The three (3) HTML Vertical alignments are address as valign=" • top | middle | bottom • HTML allows us to name each of the nine (9) different locations in the grid, however, XHTML wants you to use CSS for this action. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

25. Alignment of Individual Cells • Individual cell alignments will override any settings for the row you created. • To Center text within an individual cell both VERTICALLY and HORIZONTALLY, type <td align="center" valign="middle"> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

26. Creating a Table Border • Type <table border="1"> to create a table with a thin border around all of the table cells. • Note: To create a table with no border at all, simply type <table> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

27. Adding a Background Color • There will be times when you will wish to add a background color to a whole table or just a particular cell or row. • Use the HTML bgcolorcommand with a color name or HEX color inside the <table> or <tr> and <td> tags. For a 'Steel blue' color: <table bgcolor="#236b8e"> <tr bgcolor ="#236b8e"> <td bgcolor ="#236b8e"> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

28. BGCOLOR Examples • Examples using the bgcolorcommand inside the 3 Table tags. <table> <tr> <td> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

29. Adding a Background Image • There will be other times when you will wish to add a background image to a whole table or just a particular cell or row. • Use the HTML backgroundcommand with a GIF or JPG image inside the tableor trand td tags. For Example: <table background="image.jpg"> <tr background="image.jpg"> <td background="image.jpg"> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

30. Background Image Examples • Examples using the BACKGROUND command inside the 3 Table tags. <table> <tr> <td> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

31. Using Table Cell Spacing • You have control over the borders and spacing of the cells inside your table. • To change the internal margins of your new table, add the cellspacingattribute to the table tag. • Type: <table cellspacing="5"> • Since we are using HTML, we do not have to use anything but a number for the size. In CSS you would have to use pixels, points, ems, etc. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

32. Understanding Cellspacing • Think of Cellspacing as the distance between houses, (that is, if each house represents an individual cell.) In this photo there is very little Cellspacing! Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

33. More on Cellspacing • These homes represent more Cellspacing in a table. Spacing between cells makes the data easier to see or read. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

34. Using Table Cell Padding • You can also “pad” the individual cells of your table to add space on all sides. This keeps the text from touching the lines that make up the cell borders. • To add this space use the cellpadding tag inside your <table>tag. • To add 5 pixels of space on each side of every cell type <table cellpadding="5"> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

35. Cellpadding & Cellspacing Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

36. Flush Aligned Table • This one cell table was made to be flush against the pictures edge. (The screen resolution used here is 800 x 600.) • <tr align="center" valign="middle"> • <td><img src=“image.jpg" border="2"> • </td> • </tr> Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

37. Making a Drawing • So the best thing to do when planning a sophisticated table for your viewers is make a small drawing on paper first. • After sketching, decide which tags are needed on paper first, and then type the code. • See now your headaches are gone…or take some more Excedrin! Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

38. What This Lecture Covered • In this lecture you learned about basic HTML Table Tags. • You learned how to control Web page layout and alignment with Tables. • You learned how to incorporate Background Colors and Images into your Tables. • You learned what Cellpadding and Cellspacing are and how to use them in your Tables. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

39. What The Next Lectures Cover • In part 2, you'll learn some Table Concepts to use. • In part 3, you'll learn some of the Table Rules that will help you make your Tables more accessible. • In part 4, you'll learn how to incorporate CSS Styles into the Head of your Web page document. • In part 5, you'll see how to use Dreamweaver to create the tables and satisfy accessibility needs. Intro. to Web Page Tables by Professor Al Fichera http://profal2.com