What would any website these days be without tables? Organizing your website layout, text copy and web graphics are essential in presenting a professional and surfer-friendly website. Every single page on Cozy Frog contains dozens of tables woven together to keep our menus, headers and information right where they belong. Creating tables in HTML can get tricky at times - with a little practice and help from this cozy guide, you'll be making tables in no time!
BASIC TABLE TAGS
The bare bones of any HTML table. You need to get familiarized with these first and foremost.
| <TABLE> |
| This tag is required to begin your table. Never forget to close your tables with the following end tag: </TABLE> | |
| <TABLE CELLPADDING="3"> |
| Pads each cell with designated space in pixels. "3" entails 3 pixels of padding in each cell. | |
| <TABLE CELLSPACING="4"> |
| Space between each cell in pixels. "4" entails 4 pixels of space between each cell. | |
| <TABLE BORDER="2"> |
| Width of the border around your table. "2" is the thickness in pixels. | |
| <TABLE ALIGN="LEFT"> |
| Aligns the table to the LEFT, CENTER or RIGHT of your page depending on what you put in your tag. | |
| <TABLE WIDTH="225"> |
| The width of your table in pixels. | |
| <TABLE HEIGHT="125"> |
| The height of your table in pixels. | |
| <TABLE BGCOLOR="#FFFFFF"> |
| Background color of your table. Learn more about Hex Codes Here. | |
| <TABLE BACKGORUND="Image.gif"> |
| Displays the designated image as the background in your table. | |
ROWS AND COLUMNS
Every table in HTML consists of rows and columns. Here are the tags that act as building blocks when construction tables.
| <TR> |
| A row in your table. You can end a row with: </TR> | |
| <TD> |
| A column in your table. You can end a column with: </TD> | |
| You can give each column the following attributes:
<TD WIDTH="200" BGCOLOR="#404040" VALIGN="TOP">
You can use "VALIGN" to align the contents of each column with the TOP, CENTER and/or BOTTOM tags. The "BGCOLOR" is the background color of that column only. Width is the width of your row in pixels | |
ACTUAL TABLES
One of the easiest ways to grasp the fundamentals of table-building in HTML is to see actual tables in action. With that being said, here are some cozy tables with their respective codes. Here's your chance to see how all the tags we've covered so far can be used together.
|
Here is the code for a simple table that contains one ROW and two COLUMNS. Follow where each row and column starts and ends to get a good idea on how this tables comes together.
<TABLE WIDTH="250" BGCOLOR="BLUE" BORDER="1" CELLPADDING="5" CELLSPACING="5">
<TR>
<TD WIDTH="125" VALIGN="CENTER">
Hello!
</TD> <TD WIDTH="125" VALIGN="CENTER">
What's Up?
</TD> </TR>
</TABLE>
Here is what this table looks like:
|
|
|
Here is the code for the same table with a change to "0" for the "BORDER" and "CELLSPACING":
<TABLE WIDTH="250" BGCOLOR="BLUE" BORDER="0" CELLPADDING="5" CELLSPACING="0">
<TR>
<TD WIDTH="125" VALIGN="CENTER">
Hello!
</TD> <TD WIDTH="125" VALIGN="CENTER">
What's Up?
</TD> </TR>
</TABLE>
Here is what this table looks like:
|
|
|
The same table again - this time we put a background color of black, gave the text a font color of white in the first column and put "CELLSPACING" to "10".
<TABLE WIDTH="250" BGCOLOR="BLUE" BORDER="0" CELLPADDING="5" CELLSPACING="10">
<TR><TD WIDTH="125" VALIGN="CENTER" BGCOLOR="BLACK">
<FONT COLOR="WHITE">Hello!</FONT>
</TD> <TD WIDTH="125" VALIGN="CENTER">
What's Up?
</TD> </TR>
</TABLE>
Here is what this table looks like:
|
|
|
For this one, we removed the table's background color and changed the color of the second column to white.
<TABLE WIDTH="250" BORDER="0" CELLPADDING="5" CELLSPACING="4">
<TR>
<TD WIDTH="125" VALIGN="CENTER" BGCOLOR="BLACK">
<FONT COLOR="WHITE">Hello!</FONT>
</TD> <TD WIDTH="125" VALIGN="CENTER" BGCOLOR="WHITE">
What's Up?
</TD> </TR>
</TABLE>
Here is what this table looks like:
|
|
|
This time we've added a brand new row contains two more columns. The background color for the new columns has been set to RED.
<TABLE WIDTH="250" BORDER="0" CELLPADDING="5" CELLSPACING="4"><TR>
<TD WIDTH="125" VALIGN="CENTER" BGCOLOR="BLACK">
<FONT COLOR="WHITE">Hello!</FONT>
</TD>
<TD WIDTH="125" VALIGN="CENTER" BGCOLOR="WHITE">
What's Up?
</TD>
</TR>
<TR>
<TD WIDTH="125" VALIGN="CENTER" BGCOLOR="RED">
Nothing Much!
</TD>
<TD WIDTH="125" VALIGN="CENTER" BGCOLOR="RED">
How are you?
</TD>
</TR> </TABLE>
Here is what this table looks like:
| Hello! | What's Up? | | Nothing Much! | How Are you? |
|
|
|
In this final table, we remove all the background colors and set every word to black.
<TABLE WIDTH="250" BORDER="0" CELLPADDING="5" CELLSPACING="4"><TR>
<TD WIDTH="125" VALIGN="CENTER">
<FONT COLOR="BLACK">Hello!</FONT>
</TD>
<TD WIDTH="125" VALIGN="CENTER">
<FONT COLOR="BLACK">What's Up?</FONT>
</TD>
</TR>
<TR>
<TD WIDTH="125" VALIGN="CENTER">
<FONT COLOR="BLACK">Nothing Much!</FONT>
</TD>
<TD WIDTH="125" VALIGN="CENTER">
<FONT COLOR="BLACK">How are you?</FONT>
</TD>
</TR> </TABLE>
Here is what this table looks like:
| Hello! | What's Up? | | Nothing Much! | How Are you? |
|
|
ROWSPAN AND COLSPAN
You can also make any given column span across multiple columns and/or rows at once. Here are some quick samples on how to use the ROWSPAN and COLSPAN tags.
|
In the following table we will make the single column in the top row span over three columns in the bottom row using the "COLSPAN" tag.
<TABLE WIDTH="300" BGCOLOR="#ffffff" BORDER="1" CELLPADDING="5" CELLSPACING="2">
<TR>
<TD WIDTH="300" COLSPAN="3">
<CENTER>Do You Like Money?</CENTER>
</TD>
</TR>
<TR> <TD WIDTH="100">Yes</TD>
<TD WIDTH="100">No</TD>
<TD WIDTH="100">Maybe</TD> </TR>
</TABLE>
Here is what this table looks like:
| Do You Like Money? | | Yes | No | Maybe |
|
|
|
In the following example, the column the the right will span across two rows using the "ROWSPAN" tag.
<TABLE WIDTH="300" BGCOLOR="#ffffff" BORDER="1" CELLPADDING="5" CELLSPACING="2">
<TR>
<TD WIDTH="150" VALIGN="CENTER">No</TD>
<TD WIDTH="150" ROWSPAN="2">Maybe</TD> </TR>
<TR> <TD><CENTER>Hello!</CENTER></TD> </TR>
</TABLE>
Here is what this table looks like:
|
|
IMPORTANT NOTES
- Make sure you include the end tag for your TABLE including the ends tags for each row and column. If you forget end TAG, your table might look really screwed up!
- We put in the actualy names of the colors in the examples above. Though there are some colors that work in HTML, we recommend using actual HEX codes to designate your colors. You can learn about what colors you can use in our Color Code Guide guide.
- You can put as many rows in an table as you like and you can have as many cells in a table as well.
- Usually the total of each cell width should be equal to the width of your table, you can adjust the numbers accordingly. You can also use (%) percentages to define your TABLE widths instead of actual pixels. Something you should definitely experiment with.
- The best advice we can give you above all is to use our sample tables listed above and play around with them, change the numbers and see what happens. The best way to learn tables is with hands-on practice, we can't stress that enough!
SUBMIT