Formatting with tables

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

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

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

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

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

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.

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>

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>

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.

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

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)

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

Example (w/o color) Internet Explorer Firefox

Example (with color) Internet explorer firefox

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

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

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”>

Cell Padding and Spacing Cell Spacing

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.

Formatting Tables Continued…

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.

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

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

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.

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

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

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”>

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

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>

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

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

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”>

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>

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>

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.

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

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=“…”>

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>

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>

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

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

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”>

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>

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

Setting backgrounds to tables Tables continued Setting backgrounds to tables

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…

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?

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

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”>

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>

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!

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.

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”>

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?

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?

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?

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?

Examples of What You Can Do Table color Table with image

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.

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