Basic HTML Part 3

Tables are useful and essential when displaying tabular data for the web. Charts, Data tables, Calendars are all valid reasons to use an HTML table on your web page. HTML tables are comprised of rows and columns that display sets of data or content in an organized and structured fashion.

In this post we will use table markup tags to build a static HTML calendar. Using your text editor open your index.html file from the previous Basic HTML exercises. While following along with this exercise make sure to save often. There is a lot to do be fore we can view our table in the browser.

After the last section dealing with Blockquotes create a new heading:

<h3>Tables</h3>

Under the heading add the HTML tag that tells the web browser that the following content is a table using the <table> tag.

<table>
</table>

To create the Rows for the table use the Table Row tags <tr> and </tr> between the table tags.

<table>
<tr></tr>
</table>

Rows are horizontal division of a table and. One set of <tr> tags will create one row. To create multiple rows copy and paste the <tr></tr> tags for the desired number of rows. In this case we are creating a calendar and we will need seven rows.

<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Now our table has seven rows but still requires the addition of columns to be complete. Columns are the vertical division of tables and are created using the Table Data tags <td> and </td> The table data tags are nested with the row tags and must be applied to each of the rows.

<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Note: that the markup for this table is already taking up several lines.

Our table now has seven rows and one column. We will need seven columns for the calendar. Copy and paste the additional <td></td> to add seven columns.

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
.......

This table row now has seven columns. Repeat for each table row to complete the table.

The structure of the table is now ready for content. Leave the first row blank for now
And on the second row type the word “Sunday” in the first set of <td> tags.

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sunday</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
.......

Add the remaining days of the week.

.......
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
.......

We are going to use July 2009 as our month. The 1st of  July starts on a Wednesday so on the third row and fourth set of <td> tags type the number 1.

.......
<tr>
<td> </td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
.......

Add the rest of the days of the month.

.......
<tr>
<td> </td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
.......

Your complete table mark up should look like this

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Webnesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
</tr>
</table>

Continue to 31 and stop. Save your work and preview in your browser. You table should look like this.

simpletable

It’s not much to look at but now we will add some style and formatting to the table.

Add borders to the table by adding attributes to the <table> tag

<table border="1" cellspacing="0" cellpadding="0">

The border attribute creates a line around the individual table cell. Cellspacing creates a margin around the outside table cell while cellpadding creates a margin around the inside of the cell. Enter a number to indicate a width in pixels to assign to either of these attributes.

tablecell

Next we will use the first row that we left blank to create a table cell that span across all seven columns and contains the name of the month and year. Replace all of the <td></td> tags with the following.

<td colspan="7" align="center"><b>July 2009</b></td>

The colspan attribute tells the table cell to span across the indicated number of columns. The align attribute allows the text to be displayed left, right, centered or justified.

Next we look again at the table row containing the Days of the week. Swap the <td></td> tags with table header tags <th></th> and add a “width attribute” to the <th> tag to make each column 120 pixels wide.

<th width="120">Sunday</th>
<th width="120">Monday</th>
<th width="120">Tuesday</th>
<th width="120">Webnesday</th>
<th width="120">Thursday</th>
<th width="120">Friday</th>
<th width="120">Saturday</th>

Lastly add a Non-Breaking Space to any empty table cell (<td></td>) Empty table cells are invisible and a non breaking space will render the table cell with adding visible characters.

Save your work and view in your browser.

formatedtable

Note: that all table cells inherit the width of the table header (<th></th>)

In the past tables have been abused and used improperly to control the layout of webpages. This results in invalid HTML code that is bloated and confusing. It decreases accessibility and increases the potential for errors.

“Using tables to control the placement of text paragraph and images is improper and invalid use of HTML.”

For more info visit the W3C web page on tables, their attributes and their proper uses.

The last post of the basic HTML series will introduce the use of images and hyper links.

Remember, always close your tags!