XHTML and CSS - Tables
Tables
In this tutorial we'll be covering HTML tables, the first thing we need to do to create a HTML table is write the table tags.
<html> <head> <title> This is the title. </title> </head> <body> <table> <table> </body> </html>
Tables consist of rows and columns, so let's go ahead and create two rows with the tr tag, that stands for table row.
<html> <head> <title> This is the title. </title> </head> <body> <table> <tr> </tr> <tr> </tr> <table> </body> </html>
Everything that goes between the opening and closing tr tags is going to be one row of the table. Next we're going to add some columns, you do this with the td tags, td stands for table data.
<html> <head> <title> This is the title. </title> </head> <body> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <table> </body> </html>
Anything that you put between the opening and closing td tags will be in that column. If you view the webpage now nothing will show up, we need to add some data to the rows.
<html> <head> <title> This is the title. </title> </head> <body> <table> <tr> <td>Table row 1 column 1</td> <td>Table row 1 column 2</td> <td>Table row 1 column 3</td> </tr> <tr> <td>Table row 2 column 1</td> <td>Table row 2 column 2</td> <td>Table row 2 column 3</td> </tr> <table> </body> </html>
View that in your browser and you'll see it's structured like a table, but you can't see the border. You can add a border to make it clearer with the border attribute, you can set the border attribute to any thickness.
<html> <head> <title> This is the title. </title> </head> <body> <table border="1"> <tr> <td>Table row 1 column 1</td> <td>Table row 1 column 2</td> <td>Table row 1 column 3</td> </tr> <tr> <td>Table row 2 column 1</td> <td>Table row 2 column 2</td> <td>Table row 2 column 3</td> </tr> <table> </body> </html>
At the moment we haven't specified what data we have in each column. In order to do that we need to add table headers, to create table headers we use the tag th, this stands for table header.
<html> <head> <title> This is the title. </title> </head> <body> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Table row 1 column 1</td> <td>Table row 1 column 2</td> <td>Table row 1 column 3</td> </tr> <tr> <td>Table row 2 column 1</td> <td>Table row 2 column 2</td> <td>Table row 2 column 3</td> </tr> <table> </body> </html>
Whenever you make a table you don't always want to make a perfect grid, maybe you want to make a table that has 1 column at the top, 2 columns in the middle and 5 at the bottom. We can do this with the colspan attribute, colspan stands for column span and it says how many columns do you want to span this peace of data across.
<html> <head> <title> This is the title. </title> </head> <body> <table border="1"> <tr> <th colspan="2">colspan</th> </tr> <tr> <th>Table header 1</th> <th>Table header 2</th> </tr> <tr> <td>Table row 2 column 1</td> <td>Table row 2 column 2</td> </tr> <tr> <td>Table row 3 column 1</td> <td>Table row 3 column 2</td> </tr> <table> </body> </html>
Next I we'll look at table width, by default whenever you create a table it's going to adjust the width automatically to however long the longest piece of data is. You can adjust the width of your table in two ways with the width attribute, you can set the width attribute by setting it to a number and it will adjust the width to that many pixels, you can also adjust the table by a percent so you could set the width attribute 80% and it'll always take up 80% width of the page no matter how wide the browser is.
<html> <head> <title> This is the title. </title> </head> <body> <table border="1" width="80%"> <tr> <th>Table header 1</th> <th>Table header 2</th> </tr> <tr> <td>Table row 2 column 1</td> <td>Table row 2 column 2</td> </tr> <tr> <td>Table row 3 column 1</td> <td>Table row 3 column 2</td> </tr> <table> </body> </html>
Next we'll look at cell padding and cell spacing, cell padding will give you space between the text and the border.
<html> <head> <title> This is the title. </title> </head> <body> <table border="1" cellpadding="10"> <tr> <th>Table header 1</th> <th>Table header 2</th> </tr> <tr> <td>Table row 2 column 1</td> <td>Table row 2 column 2</td> </tr> <tr> <td>Table row 3 column 1</td> <td>Table row 3 column 2</td> </tr> <table> </body> </html>
Now let's look at cell spacing, cell spacing will give you more space between the cells themselves.
<html> <head> <title> This is the title. </title> </head> <body> <table border="1" cellspacing="10"> <tr> <th>Table header 1</th> <th>Table header 2</th> </tr> <tr> <td>Table row 2 column 1</td> <td>Table row 2 column 2</td> </tr> <tr> <td>Table row 3 column 1</td> <td>Table row 3 column 2</td> </tr> <table> </body> </html>
Now you can see that cell spacing is the space between the cells themselves, the text is still against the border but the cells are separated form each other a bit.

Page generated in 0.0099 seconds.