1. Formatting with tables

2. Tables Introduction Used to create an organized structure
Small or large blocks of data
USE SPARINGLY!
Using tables limits the editability of your page
Adds considerably to the size of your page
Restricts the ability of search engines to effectively index your page and of disabled users to effectively use it.
Due to the above, tables should be limited to presenting tabular data only

3. Table Structure
Every table is basically a rectangle containing rows and columns
Each area where columns and rows meet are called cells
Using html attributes, you can set the size of an entire table as well as the size of individual cells
Depending on purpose, you may or may not want to use borders around the table and/or cells

4. Cell spanning
Cells can span two or more columns or rows to form bigger containers for data
Same idea as “merging” in MS Word or Excel
Can span across rows or columns
These are merged columns
Column 2
Column 3
This is not
These are merged rows

5. Traditional Tables
You can use a traditional table like the one previous and the one presented to present data in a tabular format.
You can set a fixed width and height for the table to make it fit in with the rest of the page content

6. Presentational Tables
Used to showcase the content on the page in different ways
Instead of defining an exact size, you can specify a table size using percentages
Whenever the user resizes his or her browser window, the table resizes as well.
Good for page layouts as well as data tables
Like newspaper columns

7. Example Using tables to create columns on Perhaps use this
your web pages can
table to create a
Try using different
allow you to
newsletter for your
colored text in your
organize your text
viewers.
columns to make
so it is clear and
You do not need to
certain text stand
easy to read by your
add any breaks
out.
visitors. You can set
<br> in the text
You can even add
up part of a web
within your
images within your
page in table
columns. The text
columns along with
columns or design
will adjust
your text.
the whole web page
automatically when
Try different things
to be in columns
it reaches the right
similar a
side of the table cell.
columns and see what
newspaper.
you can come up
with.

8. Table Elements Tags <table> defines the table itself
<tr>
<td>
<table> defines the table itself
<tr> defines the table row
<td> defines the table data (or cell content within each row)
<table> <tr> <td>….</td> </tr> </table>

9. Table Elements Continued…
You can assign table headers, adjust the alignment of data and add background colors and images.
Headers:
You will need to add the <th> tag after the <tr> tag so that the headers will bold. You will have to close this tag after you enter the header data
<tr> <th>System</th>
<th>Description</th>
</tr>

10. Table Elements Continued
Do not add in the <td> tag when adding in the <th> tag. Your column headings will not line up with the remainder of your content.

11. Try it!
Create a new HTML document and give it a different name from that of your first page.
Create a simple table with 2 columns and three rows using simple information about your webpage (You can go back and change later).
Be sure to make your headings bold.
In all you will have one row for headings and two rows of content
Hint: It might be easier to set up your table with exactly the rows and columns that you need THEN add in the content

12. Table Borders
You can control the width of the borders in your table using a Border attribute
To TURN OFF borders, you can set the border value to 0 (zero)
However…
The default is not to have borders in MOST browsers
You will want to use borders in traditional tables due to the data presentation
You will want to eliminate borders for presentational tables (such as those in newspaper style)

13. Table Borders Continued…
When you set a border thickness, it applies ONLY to the outer edge of the table, not to the cells
Cell padding and spacing will allow you to alter the interior borders.
Borders appear gray unless you specify a color
Within the table tag (<table>) you will need to add your border attribute (border=“…”) and your border color attribute (bordercolor=“…”)
Your border value is measured in pixels
Your border color is stated as a hexidecimal – Try all browsers as some is not recognizing the border color with html5

14. Example (w/o color)
Internet Explorer
Firefox

15. Example (with color)
Internet explorer
firefox

16. Try it!
For the table you created add the attributes for border and border color.
For the border, make the value at least 5
For the border color, make sure it stands out against your background

17. Cell Padding and Spacing
Padding is used to add space between the border and the contents of a cell
Padding can make table content more legible
Single side cell padding (any side) can be done using CSS
You can use spacing to increase the border size or distance between cells
Increasing the spacing can add emphasis to the borders when you have borders turned on

18. Cell Padding and Spacing Continued…
Both padding and spacing size is measured in pixels.
Browsers generally default the padding to 1 pixel and 2 pixels for spacing if you do not specify
The attributes are to go inside the table tag
Attributes:
cellpadding=“…”
cellspacing=“…”
<table border=“1” cellpadding=“10”>

19. Cell Padding and Spacing
Cell Spacing

20. Try it!
Using the table you created, add cell padding and spacing; however, conduct it in this order:
Change your border to 1 (remember the values are displayed in pixels!)
Add cell padding of 5 and then check it in your browser
Remove the cell padding and add the cell spacing of 5 and check in your browser
Add the cell padding back in so that you see both.

21. Formatting Tables
Continued…

22. Adding Blank Cells
If you need cells to be blank to maintain a specific order, you will need to specify the cell with the special character
What is that special character?
What would it look like?
<th>  </th>
Open your webpage in Notepad and add a heading tag at the beginning of your heading row with the blank space. Save and see what it does in your browser.

23. Adding a Blank Cell Without adding additional columns
Adding other column s and text

24. Try it!
Add addition information to your table to create a 4 column, 5 row table
Be sure to have one blank cell in the top left corner
Save your work and view in your browser.
Be sure to show me your work

25. Table Size
You can control the exact size of the table using the appropriate attributes.
Attributes:
width=“…”
height=“…”
Values are stated in pixels or percentages
Pixels will provide a more rigid table for the look you want; however, the table will be more flexible if using percentages
Where do these attributes go?
In the table tag
<table width=“600” height “500”>
<table width=“100%”>
***The height attribute is not as well supported as the width attribute and may not display properly in all browsers.

26. Table Size Continued…
You cannot set a table too small for its contents.
The browser will ignore the measurements and try to make the table fit as best it can
HOWEVER, if you set a table too wide, users can be forced to scroll to see parts of the table
For best results, do not make your table wider than 750 pixels
IF you do not specify a width:
The browser will size the table based on the cell contents (this will be based on the largest content but not past the right edge of the browser window)
If a table contains large images, it may have to extend beyond the browser’s viewing area to accommodate the images forcing the user to scroll

27. Cell Width and Height
You can allocate more space to the columns or rows that have more content
If you do not specify the width or height of the cell, the content of the cell determines the cell’s size
You can specify dimensions using a pixel value or using a percentage relative to the width or height of the overall table.
When you adjust the width and height of the cell, all the cells in the same row and column respectfully adjust to the same width and height

28. Cell Width and Height Continued…
Attributes:
width=“…”
height=“…”
What tag would these go in?
<td> or <th>
<td width=“120” height=“120”>
<th width=“120” height=“120”>

29. Examples
Table width set (700)
Heading width set (120 each)

30. Another Example HTML Internet Explorer
<html> <head><title>Table Example</title></head> <body> <table border="1" cellspacing="3" cellpadding="3" bordercolor="green"> <tr> <th width="120" height="50">Heading 1</th> <th width="120" height="50">Heading 2</th> </tr> <td width="120" height="50">Row 2 Column 1</td> <td>Row 2 Column 2</td> <td width="60" height="60">Row 3 Column 1</td> <td>Row 3 Column 2</td> </table> </body> </html>

31. Try it! Open your webpage that contains your table in Notepad
Alter your table size (not cell size) to have a width of 700 and a height of 50%
After you have shown it to me, remove your height
Then change your width of the cells to 120 or more and your height to 50 or more
Show me your work
Be sure to save after each step and view in your browser

32. Extending Cells
You can create a larger cell in your table by extending the cell across two or more columns or rows.
Spanning (merging) cells allows you to create unique cell structures within your table and without jeopardizing the sizes of other cells to accommodate the larger content whether font size or amount of text
Examples for using:
Cells across top for a single heading, picture
Cells along side to create navigation or adjust heading alignment

33. Extending Cells Continued…
Attributes:
colspan=“…”
rowspan=“…”
What tag would these go into?
Inside the tag for the cell you want to extend
You need to specify your value as to how many columns or rows you want to extend.
What will it look like?
<th colspan=“3”>
<td rowspan=“4”>

34. Across Columns
<html> <head><title>Table Example</title></head> <body> <table border="1" cellspacing="3" cellpadding="3" bordercolor="green"> <tr> <th colspan="4" width="120“ height="50">Main Heading</th> </tr> <th> </th> <th width="120" height="50">Heading 1</th> <th width="120">Heading 2</th> <th width="120">Heading 3</th>

35. Across Rows
<html> <head><title>Table Example</title></head> <body> <table border="1" cellspacing="3" cellpadding="3" bordercolor="green"> <tr> <th width="120" rowspan="2">Category</th> <th colspan="4" width="120" height="50">Main Heading</th> </tr> <th width="120" height="50">Heading 1</th> <th width="120">Heading 2</th> <th width="120">Heading 3</th>

36. Try it!
Get an idea of how you want your table to look using this criteria:
Extend your cells down 2 rows
Extend your cells across 2 columns
When extending across your columns, create a new row and span across adding a heading to your table
Be sure to check each step in your browser. You may be surprised how it comes out when you do not intend it to appear in that fashion. You may have to play with this.

37. Table Alignment & Text Wrapping
You can control the positioning of the table on your Web page
Attribute?
align=“…”
<table align=“left”>
You must state your alignment to get text wrapping to occur. If you leave this blank then your text will simply move to below the table.
Generally, your body of text that is wrapped will be below your table. Remember this if you want text to accompany your table.
Note that the text does not wrap around a centered table

38. Table Alignment/Wrapping Continued…
The align attribute also determines the way in which text wraps around your table element.
You can disable the text wrapping by adding another tag and attribute before the text you want to prevent from wrapping
<br clear=“…”>

39. Table Alignment: Text Wrapping
<table> <tr> <td height="50">&nbsp</td> <td>Row 5 Column 3</td> <td>Row 5 Column 4</td> <td>Row 5 Column 5</td> </tr> </table> <p>To stop text from wrapping type the tag and attribute before the text with the alignment value you want to clear. In this example, the table is right-aligned, with the text wrapping around the left side.</p> </body> </html>

40. Table Alignment: Text Wrapping
<table> <tr> <td height="50">&nbsp</td> <td>Row 5 Column 3</td> <td>Row 5 Column 4</td> <td>Row 5 Column 5</td> </tr> </table> <p><br clear="right">To stop text from wrapping type the tag and attribute before the text with the alignment value you want to clear. In this example, the table is right-aligned, with the clearing of text wrapping from around the left side.</p> </body> </html>

41. Try it!
Create a paragraph below your table. Be sure your paragraph is a few sentences long.
Save and then check in your browser
Align your table to either the left or the right
Check in your browser that the changes were made
Be sure to show me your work before going on to the next step
Add the tag and attribute before your text to prevent text wrapping
Be sure to show me your work before deciding whether to keep the text wrapping or not

42. Cell Alignment
You can control the alignment of data within your table cells using the appropriate attributes
Attributes?
align=“…”
valign=“…”
The “align” attribute controls horizontal alignment
Values would be “left,” “center,” or “right”
The “valign” attribute controls vertical alignment
Values would be “top,” “middle,” or “bottom”
By default the data is vertically aligned to appear in the middle of the cell

43. Cell Alignment Continued…
You can set a single cell alignment by adding the alignment attributes to the data tags
<td align=“center” valign=“bottom”>
You can set all cells in a row by adding your alignment to the row tag
<tr align=“center” valign=“bottom”>

44. Example
<table align="right" border="1" cellspacing="3" cellpadding="3" bordercolor="green"> <tr align="center" valign="bottom"> <th width="120" rowspan="2">Category</th> <th colspan="4" width="120" height="50">Main Heading</th> </tr> <th width="120" height="50">Heading 1</th> <th width="120">Heading 2</th> <th width="120">Heading 3</th> <td height="50">&nbsp</td> <td>Row 3 Column 3</td> <td>Row 3 Column 4</td> <td>Row 3 Column 5</td> <tr> <td width="60" height="60">&nbsp</td> <td>Row 4 Column 3</td> <td align="center" valign="bottom">Row 4 Column 4</td> <td>Row 4 Column 5</td>

45. Try it!
Change your cell alignments to show difference from what the default alignments
Change at least 2 entire rows
Change at least 1 individual cell
Be sure to show me your work

46. Setting backgrounds to tables
Tables continued
Setting backgrounds to tables

47. Before We Begin… Go online and look for an image.
Save it to your personal drive
Open it in Adobe Photoshop
Go to File
Save for Web
We will walk through the rest together…

48. Table Backgrounds
Can help define table cell structure just like borders
You can use a different color in table heading cells to set off those cells from the data cells.
In presentation tables, background colors can set off headers, navigation, and footer sections of a page from the main content
You can also add background images to a table just as you can to an entire web page
However…BE CAREFUL!!!....Why?

49. Background Color to Cells
Add color to individual cells or to certain rows and columns.
Used to draw attention to the cell contents or to distinguish header cells from data cells
Be careful not to choose a color that makes the table data difficult to read.
You can also add color to the whole table

50. Background Color to Cells
What is the attribute?
bgcolor=“…”
What would the tags be to use this in?
<table> for the entire table to be colored
<td> or <th> for individual cells
<tr> for an entire row
All together…
<table bgcolor=“yellow”>
<tr bgcolor=“blue”>
<td bgcolor=“green”>

51. Example
<table bgcolor="yellow" align="right" border="1" cellspacing="3" cellpadding="3"
bordercolor="green">
<tr align="center" valign="bottom">
<th bgcolor="green" width="120"rowspan="2">Category</th>
<th colspan="4" width="120" height="50">Main Heading</th>
</tr>
<tr bgcolor="orange" align="center" valign="bottom">
<th width="120" height="50">Heading 1</th>
<th width="120">Heading 2</th>
<th width="120">Heading 3</th>
<td height="50">&nbsp</td>
<td>Row 3 Column 3</td>
<td>Row 3 Column 4</td>
<td>Row 3 Column 5</td>
<tr>
<td height="60">&nbsp</td>
<td>Row 4 Column 3</td>
<td align="center" valign="bottom">Row 4 Column 4</td>
<td bgcolor="orange">Row 4 Column 5</td>

52. Try it! Apply a background color to your entire table.
Apply a background color to at least 1 row
Apply a background color to at least 1 cell
ALL MUST BE A DIFFERENT COLOR!

53. Background Image
Add a background image to appear behind your entire table
Can give your table a more interesting design by complimenting the data that appears in the table cells.
BE CAREFUL!
The design and colors do not clash with the table data or make it illegible.
If need be, change the text color to make it stand out more or lighten the image.

54. Background Image What tag would you use for a background image?
<table>
What is the attribute?
background=“…”
What would the value be?
Whatever the path is for your picture
<table background=“rollinghills.jpg”>

55. Example
<table background="school.gif" align="right" border="1" cellspacing="3" cellpadding="3" bordercolor="green"> <tr align="center" valign="bottom"> <th width="120"rowspan="2">Category</th> <th colspan="4" width="120" height="50">Main Heading</th> </tr> <th width="120" height="50">Heading 1</th> <th width="120">Heading 2</th> <th width="120">Heading 3</th>
What is wrong with this picture?

56. Example
<table background="library2.gif" align="right" border="1" cellspacing="3" cellpadding="3"
bordercolor="green">
<tr align="center" valign="bottom">
<th width="120"rowspan="2">Category</th>
<th colspan="4" width="120" height="50">Main Heading</th>
</tr>
<th width="120" height="50">Heading 1</th>
<th width="120">Heading 2</th>
<th width="120">Heading 3</th>
Anything wrong with this picture?

57. Example
<table background="columns2.jpg" align="right" border="1" cellspacing="3" cellpadding="3" bordercolor="green"> <tr align="center" valign="bottom"> <th width="120"rowspan="2">Category</th> <th colspan="4" width="120" height="50">Main Heading</th> </tr> <th width="120" height="50">Heading 1</th> <th width="120">Heading 2</th> <th width="120">Heading 3</th>
What would you change about this picture/table?

58. Add an Image to a Single Cell
<table align="right" border="1" cellspacing="3" cellpadding="3" bordercolor="green">
<tr align="center" valign="bottom">
<th width="120"rowspan="2">Category</th>
<th colspan="4" width="120" height="50">Main Heading</th>
</tr>
<th width="120" height="50">Heading 1</th>
<th width="120">Heading 2</th>
<th width="120">Heading 3</th>
<td background="columns2.jpg" height="50">&nbsp</td>
<td>Row 3 Column 3</td>
<td>Row 3 Column 4</td>
<td>Row 3 Column 5</td>
What is the issue with this?

59. Examples of What You Can Do
Table color
Table with image

60. Try it! Remove the color and add the image you “saved for web”
Be sure to save your work and show me your changes.
Ask yourself if that is the right image for being in a table…
Look for a more appropriate image that is lighter in color that will not distract from your table.

61. Try it!
Work through Lab 4 (treated as a test!) Can use tag and attribute references and ppt handouts!