Web Develop > Table Properties - Lesson - 07

Table Background Color

We can use background colors for tables in new browsers. You can specify background color options inside "TABLE" tag.

In above example entire table will change to new color even table borders. You can also determine background color for each row of your table. If you want to do this, you must use BGCOLOR option inside "TR" tag of the desired row. This second method will only change colors of cells in specified row.

You can even change color of individual cells by using BGCOLOR option in "TD" "/TD" cell tags. You can mix all above options to create your desired table. In next example we will change color of first row to "#336699". Then we will change color of two cells in second row to "#66CCFF" and "#CCFFFF" respectively.


Column Span

Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to join two cells with each other. In this way we will have two cells in first row and three cells in second row. Enter this html code in a file and browse it in your browser to see what columns span is.

Just be careful that when you have for example 2 cells in first row and first one uses column span parameter COLSPAN=2 it means that it is equal to two cells. Therefore you must have three cells in next row (three "TR" tags) or you may use COLSPAN to create cells that when you add them, it will be equal to previous row or 3 in this example.


Row Span

This time we want to join two cells in a column (from different rows). This is the same as previous section with the difference that we will join cells from different rows rather than cells in different columns. This time we must use ROWSPAN instead of COLSPAN.

Again you must be careful that when you have for example a cell in first column that you have joined two cells to create it using the option ROWSPAN=2 then your table must have two rows and you must take this in mind in next parts of your table. In above example we only entered two cells in second row (started from second "TR" ) as first cell of first row has occupied first cell of this row too and we have only two cells left of 3 cells. Enter this example and browse it to see the results.

You may want to mix these tags to create your custom tables however this is a complicated task and you must work hard to gain needed experience with these tables.


Nested Tables

Yes we can nest tables in each other. If you are going to design complicated web pages you will always do this. For example you need a table with border size of 3 in a specific part of a web page. To fix position of that table in your desired place you will need a table with border size of 0. In this case first table can be seen as its border size is 2 but second one will not be seen as you used it just for positioning of first table. Anyway, writing a nested table code is easy.

In this example we have a 1*4 table. We want to hold our main table inside this table in its third column so that our main table will be shown in right side of the center of the screen. Main table has a border size of 1 while first table is hidden.