Display Text and Numbers in an HTML Table

DIRECTIONS

     To display text and right-aligned numbers in different cells in a table like the one displayed below, copy the HTML code below the sample table into your Blackboard document. Then replace the text and numbers between the HTML tags with your own data to create your table.
SAMPLE TABLE

HEADING 1 HEADING 2 HEADING 3

Item 1 explanatory text $37.50 $187.50

Item 2 explanatory text 150.00 750.00

Item 3 explanatory text 200.00 1000.00

Item 4 explanatory text $1937.50

HTML CODE TO COPY INTO YOUR BLACKBOARD DOCUMENT

<table border="2" cellpadding="5" cellspacing="0" bgcolor="#ffffff">

<style type="text/css">



</style>



<tr  bgcolor="#f0f0f0">

<th> </th>

<th>HEADING 1</th>

<th>HEADING 2</th>

<th>HEADING 3</th>

</tr>



<tr>

<td><b>Item 1</b></td>

<td>text</td>

<td align="right">$37.50</td>

<td align="right">$187.50</td>

</tr>



<tr>

<td><b>Item 2</b></td>

<td>text</td>

<td align="right">150.00</td>

<td align="right">750.00</td>

</tr>



<tr>

<td><b>Item 3</b></td>

<td>text</td>

<td align="right">$200.00</td>

<td align="right">$1000.00</td>

</tr>



<tr>

<td><b>Item 4</b></td>

<td>text</td>

<td align="right"> </td>

<td align="right">$1937.50</td>

</tr>

</table>

EXPLANATION OF HTML TAGS

Heading Rows and Cells: The "<tr>< /tr>" tag marks the beginning and the ending of the heading row, and the "<th></th>" tag marks the beginning and the ending of the heading cell. The contents in heading cells are always displayed as bold.
Columns and rows: If you need fewer columns or rows, delete the appropriate numbers of rows and columns (the "<tr><td></td></tr>" tags) or columns (the "<td></td>" tags within the rows) or add more rows and columns or columns within the rows if you need more. Be sure, of course, that you include your additional text or numbers within the tags.
Default cell alignment: Also note that the cells that contain left-aligned text are marked with the simple cell tags (<td></td>) within the rows.
Right-aligned cells: Right-aligned numbers or text are placed within right-aligned HTML cell tags (<td align="right"></td>) within the rows.
Bold text in a cell: If you want the content in the cells to be bold, place the "<b>" tag after the <td> tag. You do not need to close the bold tag since you will close the cell with </td>.
Style tags: Notice also the "style" tag that is placed after the beginning table defintion and before the first rows and columns tags to produce the font style and size within each cell in the table.
Non-breaking space tags: Also, note the use of the non-breaking space tag placed within the empty cell in the heading row so that borders will appear around the blank cell (<th> </th>).
Row markers: Next, be sure to note that the "place holders" appear in the background in your HTML document to help you locate the appropriate table row. They will not appear in the document that the viewers see within their course, just as you do not see them in the sample table below. You can remove those if you want, but you may want to leave them to help you navigate your way through your table as you replace the text or numbers with your own.
Submitting table in Blackboard: Finally, when you create your document in Blackboard, be sure to select the "HTML" option rather than "smart text" to display your table. Otherwise, you will have unncessary blank spaces in your document. If you wish to include other text before or after the table, use the paragraph tag (<p>) before and after the beginning of the table and the end of the table tags.
More HTML: For more information on other HTML tags to produce numbered or bulleted lists and other font colors or background colors in table cells, please read Basic HTML for Enhancing Blackboard Documents

VARIATIONS ON TABLE FORMAT

     Note: If you would like for your table to be centered rather than aligned left, add the align="center" tag to the beginning table tag. The table tag that you see at the top of this document will expand or contract with the size of the data in the cells. If you would like your table to be wider, you can specify a table width in pixels or as a percentage—95%, for example—of the viewing area, The table immediate below, for example, is 400 pixels wide, and the second example occupies 95% of the viewing area. Be careful is you specify the width in pixels. Blackboard courses use a frame on the left side of the screen that is almost 200 pixels wide. A 17-inch monitor would allow only 600 pixels wide in the document area on the right side of the screen. You can also add an alignment tag within the table tag if you would like your table to be centered. Of course, if you eliminate the table width tag completely, then the table will contract or expand in width with the size of the data within each cell. You can also experiment with the width of the table border, the amount of padding (space between the cell borders and the data), and the amount of "cellspacing" (space within the width of the table border itself, which does not appear in these sample tables with "0" cellspacing).

HEADING 1 HEADING 2 HEADING 3

Item 1 text data in cell text data in cell $1041.15

<table border="2" cellpadding="5" cellspacing="0" bgcolor="#ffffff" width="400">

<style type="text/css">



</style>



<tr  bgcolor="#f0f0f0">

<th> </th>

<th>HEADING 1</th>

<th>HEADING 2</th>

<th>HEADING 3</th>

</tr>



<tr>

<td><b>Item 1</b></td>

<td>text</td>

<td>text</td>

<td align="right">$1041.15</td>

</tr>

</table>

HEADING 1 HEADING 2 HEADING 3

Item 1 text data in cell text data in cell $1041.15

<table border="2" cellpadding="5" cellspacing="0" bgcolor="#ffffff" width="95%" align="center">

<style type="text/css">



</style>



<tr  bgcolor="#f0f0f0">

<th> </th>

<th>HEADING 1</th>

<th>HEADING 2</th>

<th>HEADING 3</th>

</tr>



<tr>

<td><b>Item 1</b></td>

<td>text</td>

<td>text</td>

<td align="right">$1041.15</td>

</tr>

</table>