CodeNique - Free Tutorials on HTML, XHTML, CSS and More Online!

Now tables are made up of rows and columns that can hold almost anything from headings, numbers, text, images, forms, and even other tables and tags and so on.

Now let me show you where the table rows and cells are in the table. We will need to use the <table> tags border attribute, which was designed for this purpose. We will also need to use a number for the value, which determines the thickness of the tables border in pixels. The default value of the border attribute is 0. No border appears if you don’t use the border attribute or if you have a value of 0.

Now let me introduce you to another tag called the <th> tag which is used to create a header cell. The <th> tag also requires an end tag. The <th> tags header cells contents are centered and have a boldface font. However, our example below will not be centered across the entire width of the table because it only spans the first cell. I will show you how to fix this problem after this tutorial in the tutorial called “How To Span Your Tables Cells Using The Rowspan & Colspan Attributes“.

Now let’s talk about how we can expand cells by cell spanning. Cell spanning is when one cell flows into another cell. Basically, cell spanning is when one cell merges with the cell next to it and appears as if they are all one big cell. You can span cells vertically across rows using the rowspan attribute and horizontally across columns using the colspan attribute. You can set the attributes values to the number of rows or columns that a cell has to span. You can only place the rowspan and colspan attributes in the <td> and <th> tags.

Now lets talk about the cellpadding and cellspacing attributes for the <table> tag. The cellpadding attribute adds space within the walls of a cell, the space is placed around the cells contents on all four sides. The default value for the cellpadding attribute is 1 pixel. Now the cellspacing attribute adds space between the cells in a table but does not change the size of the cells themselves. The default value for the cellspacing attribute is 2 pixels. You can use either pixels, for example 10px or a percentage, for example 10% for the values of both attributes.

Now we can set the size of our tables by using the <table> tags width attribute. The width attribute sets the width of the table. You can also use the height attribute, which sets the height of the table. The height attribute is actually not part of the HTML specifications. You can use either an absolute number value, which are pixels (px), or a relative number value, which are percentages (%), for the values of the width and height attributes. When the values for these attributes are less than the minimum space required to render the tables contents, the browser will override the attributes settings to make sure that all the tables contents will appear.

Now let me show you how to define your tables using the <thead>, <tfoot> and <tbody> tags, I will explain each tag just for you, because you’re special.

Now let me introduce you to the <table> tags summary attribute, which is used for text to speech browsers or non-visual browsers, what ever you want to call them, they are basically for users with disabilities.

Now let me explain the <th> and <td> tags axis attribute, which is used to describe the cell’s category as well as used to group related columns of information. The axis attribute is usually used for non-visual browsers, or text to speech browsers, what ever you want to call it. Basically, you will be giving a cell a brief label to describe the data in the cell.

The <caption> tag provides a brief summary of the tables contents or purpose. The <caption> tag follows the <table> start tag and comes before all other tags. By default, browsers will place the <caption> tags contents centered above the table. The <caption> tag also requires an end tag.

Now I’m going to show you how to change the background color of your table in this tutorial. You can use the bgcolor attribute in any of the tables tags whichever one you want the color changed in.

Now let me show you how to add color to your tables borders using Internet Explorer’s nonstandard bordercolor attribute, and Internet Explorer’s special extension bordercolorlight and bordercolordark attributes.

Now the <table> tags frame attribute can be and should be used with the <table> tags border attribute. The frame attribute gives you more control over how your borders on your table are drawn. In other words, the frame attribute tells the browser where to draw borders outside the table. If the border attribute is set to a value greater than zero, the tables frame will default to the border value unless otherwise stated using the frame attribute, just to let you know the border and box values for the frame attribute will display the same. When using the frame attribute the border attribute should have at least a value of 1 in order to view the borders. The frame attribute, works in Internet Explorer 4 and up as well as Netscape 6 and up, Firefox and other type of browsers.

Now the <table> tags rules attribute can be and should be used with the <table> tags border attribute. The rules attribute gives you more control over how the internal cells borders also known as rules inside your tables are drawn. In other words, the rules attribute tells the browser where to draw borders inside the table. Now if the border attribute is set to a value greater than 0, the rules attribute will default to the value all unless otherwise stated. And if the border attribute has a value of 0 the rules attributes default value will be none. When using the rules attribute the border attribute should have at least a value of 1. The rules attribute was introduced to HTML in Internet Explorer 3.0 and is now in the XHTML recommendations but it is still not widely supported currently.

Now in order to define your <table> tags columns we will need to use the <colgroup> tag by itself or with the <col> tag.

Now you can add a background image to a table or a table cell by using the background attribute and placing it in the <table> or <td> tags followed by the location of the image. The image that you choose will tile across the table or cell. What I’m trying to say is that if you use an image that is smaller then the table or cell the image will repeat until the table or cell is filled.

First and foremost, you should have at least gone through the "How To Create A Simple Table Using The <table> Tag" tutorial to be familiar with tables, before you try to ace this tutorial.