HTML & CSS Tutorial: Tables

This is a tutorial on how to create and customize tables using HTML and CSS. Let's start with the basics, shall we? Here is a very pretty basic table.

1	2
3	4
5

This is the code:

As you can see <tr> forms a new row whild <td< forms a new cell. All of your text and content should be in thd <td> tags. I added border="1" so you can see the table better, but you can also put border="0" instead. For design purposes, you usually want a border of 0. That would look like this:

1	2
3	4
5

Now what if you want cell #5 to expand all the way across the table? Also, you want to add color to one of the cells. You can use colspan to make it look like this:

1	2
3	4
5

You're telling the cell to span across 2 cells, basically. The code is this:

The same concept applies to rowspan. You can also vary the cellpadding and cellspacing in the <table> tag. This is the same table as above with the cellpadding and cellspacing removed:

1	2
3	4
5

You can set the height and width of your table and of your cells within the <table> tag and the <td> tags, like this:

1	2
3	4
5

Note that when you adjust the width of one cell, the corresponding cells in different rows change with it.

If you don't want your content to be in the center of the table, you can use valign and align.

1	2
3	4
5

I changed the content in cell #2 and #4. You can also use align on the <table> itself to set the table to the right, left, or center of the page.

Now you want to set a table background image, right? Use style="background-image: url(IMAGEURL); and replace the IMAGEURL with the URL of your image. It goes like this:

1	2
3	4
5

Note that whatever you do to each cell overrides what you do to the table in general. Also note that I only had the background in cell 5 repeat horizontally. You can use background-repeat: repeat-x to do this. If you want to repeat vertically, use repeat-y and if you don't want it to repeat at all, use no-repeat.

That's pretty much all your basics about tables. Enjoy!

Tutorials

Design

Quizzes

Interactive

HTML & CSS Tutorial: Tables

Forum

Site

Site of the Month

Affiliates