Styling HTML Tables via CSS I

Content of the lesson:

The Basic Structure of HTML Table

Every table is a structure of a particular number of rows. Every row contains ending number of columns. Every column in a row is called a cell.

Every HTML table has to begin with the <table> tag and end with the </table> tag. The following elements can be used inside any table:

• <tr> - beginning of a row
• </tr> - end of a row (every row has to be begun and ended with these elements)
• <td> - beginning of a cell inside a row
• </td> - end of a cell

Simple Table

At the beginning we are going to create a simple table with two rows and two columns:

You can see the beginning tag in the first line, then the tag for the beginning of new row. The following two lines contain two separated cells. There is the end of the first row on the fifth line. The rest of the table is the same and the table ends with proper tag.

The final HTML table:

ORDER	Last Name, Sure Name
1	Světlík Jaromír

 

You can see that the table almost cannot be recognized in a browser so a border around it would be great to better orientate in it. You can add a border attribute in the HTML file: <table border="1">.

Our HTML table will change like this one:

ORDER	Last Name, Sure Name
1	Světlík Jaromír

 

The structure is clearly visible but there are two new problems:

1. Texts inside the table are too close to borders and it would be perfect to add some space around texts - the orientation would be much better.
2. The appearance of the border lines do not have to appear as we want because this is the default appearance of a border in your browser (default appearances may differ in different browsers). You should specify the appearance of the border by hand to be sure it will be displayed the same way in all browsers and style it as you want.

Problem 1 - spacing in the table - adding some "air"

There is an attribute cellpadding available at every table which requires an integer value [0..n] and it sets the distance between the border of a cell and its content. In a common HTML this situation could look like this one:

The final HTML table should gain additional space (you can try to copy it inside a new HTML document and view it inside your browser):

ORDER	Last Name, First Name
1	Světlík Jaromír

 

It would be easy to write cellpadding attribute to one table but you should realize that you may create a page with tens or hundreds of tables. Then your customer can order you to change cellpadding inside all of them and you will have to rewrite them all. Much better and faster way is to automate this procedure using CSS styles and set the padding parameter via CSS.

Take a look how a CSS rule for the cellpadding can be added. There is no cellpadding property inside CSS but you can find the padding property (in general it is inner space between a border and inner content). What is the right element to which you want to apply the padding property? You want to create space around the content of every cell so the required element is the cell (<td>).

After applying this rule all our tables should change as we set.

ORDER	Last Name, Sure Name
1	Světlík Jaromír

Problem 2 - border of the table

We should solve the problem about the border of the table. The first idea which could be the right one is using the border property for the table element. We should know that the border property requires color, width of the border and type.

The border can be seen below this text - only the whole table has border but not the cells.

ORDER	Last Name, Sure Name
1	Světlík Jaromír

Now try to write and apply a rule to draw border around every cell. The rule is analogue but you should apply it for every td element.

The final table can be seen below this text - the border is drawn around every cell inside the table.

ORDER	Last Name, Sure Name
1	Světlík Jaromír

In case we do not want any space between the border of the table and every cell, you can add the cellspacing=0 attribute inside the HTML file. This parameter sets the spacing between every cell and if set to zero, no spacing will be displayed.

The adjusted table:

ORDER	Last Name, Sure Name
1	Světlík Jaromír

Because of the possibility to change every table by changing one line of code we should use a CSS rule for this.

The final table is illustrated below this text.

ORDER	Last Name, Sure Name
1	Světlík Jaromír

Individual Task

Explain the usage of the border-collapse property in connection to the table element. Try to create a sample using this property.

Additional Texts

Questions

1. What is the basic structure of every HTML table?
2. What do the properties cellpadding and cellspacing do?
3. How can you set spacing around texts inside table cells?
4. How can you set a border of your table using CSS styles?
5. How does the CSS property border-collapse function?