HTML Tutorial: A Crash Course In Tables

Leave a comment Standard

It amazes me how many people proclaim to be programmers but they can’t even write simple HTML code. Sooo, this post is in response to all the would be web developers out there who don’t really know what in the hell they’re doing when it comes to tables.

FAQ: Why is it important to properly format and nest your tables?

Different browsers behave differently for code that is written improperly. To help ensure your table displays the way you intended it to always use correct nesting and ensure you have matching tags.

A Simple Table

<table>
   <tr>
     <td>hello there</td>
     <td>bye for now</td>
   </tr>
</table>

Simple Table (Visual)

hello there bye for now

This table has one row and two columns. A table always starts and ends with a <table> and </table> tag. If you forget to put the end </table> tag and start another table immediately following you’ll sometimes find that the browser will close your first table for you — but not always! It’s not safe to assume that your browser is smart enough to fix your HTML mistakes for you.

Now a table isn’t limited to a number of rows or columns but I find many people don’t know how to span rows or columns appropriately.

Spanning A Column

<table>
  <tr>
   <td>hello there</td>
   <td>bye for now</td>
  </tr>
  <tr>
   <td colspan="2">huh?</td>
  </tr>
</table>

Spanning A Column (Visual)

hello there bye for now
huh?

When you span a column the cell takes up the space of both columns. A lot of time I see people put in extra <td> and </td> tags even when they have a colspan set to the appropriate number. The colspan always equals the number of columns you want to span (if that isn’t obvious enough). There’s never any need to put a colspan of 1 because that’s the same thing as having a <td> and </td> without a colspan attribute.

Spanning A Row

<table>
  <tr>
   <td rowspan="2">Hey there</td>
   <td>bye for now</td>
  </tr>
  <tr>
    <td>huh?</td>
  </tr>
</table>

Spanning A Row (Visual)

Hey there bye for now
huh?

This does the opposite thing that a colspan does. Your table cells are now merged down instead of merged across. When you do a row span there is no need to include a <td> and </td> for the row you’re merging over. If you do you’ll end up with strange results and a misshappen table. The cell that has the rowspan attribute on it is always the one that merges into the cell that would have been beneath it.

Table Attributes

Here’s a list of attributes you can assign to the table tags. Ironically enough I’ve decided to put these in a table.

Attribute Description Example
Border this sets an outline around the tables <table border=”1″>
Cell Padding this puts space around the content inside of a table cell <table cellpadding=”2″>
Cell Spacing this puts space between the td cells <table cellpadding=”0″>
Width set the exact or relative width of the entire table or cell <td width=”20%”>
Height set the exact or relative height of the entire table or cell <td height=”22″>
Align sets the text alignment inside of the cell (left, right, middle, justify) <td align=”right”>
Valign sets the vertical alignment of the td cell (top, bottom, middle, abstop, absmiddle, absbottom, baseline) <td valign=”middle”>
Class used to setup a style on the cell <td class=”darkblue”>
Background set the background color of the table <table background=”#000000″>
Foreground set the text color in the table <td foreground=”#FFFFFF”>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s