There area a number of attributes that can be used to change the look of your tables once you've created them. In this lesson, we'll take a look at a few. Here is a simple table (three rows, two columns). In it, I've included a little text, but no formatting other than the bare minimum of tags it takes to create a table:


As you can see, there are no lines. By default, the table tags have a border setting of zero. This can make some tables (like this one) difficult to read. So, to make the table lines visible when you need them, HTML provides the border= attribute. Visible border values begin with 1 and can be increase to include as many pixels as you need (or have room for onscreen). Adding border="1" to this table will give us this:


Now you can see the lines, but they're nearly the same color as the background. You can make them standout more by using the bordercolor= attribute. Most browsers support this, but they render the final border differently. You can see the colors best in Internet Explorer, because it colors both the table border and the borders around each cell. Netscape will add a thin line of the chosen color just outside the table border. Adding bordercolor="#C00000" to this table gives us:


You can make the border stand out a bit more by increasing the width of the border= attribute. Interestingly, changing this width only changes the thickness of the table border and not the interior borders of the cells. Changing the value to border="3" gives us this:


If you're using Internet Explorer, you can easily see the spacing between the table and cell borders. In Netscape, this spacing looks like an embossed line. You can widen this space by adding the cellspacing= attribute to your table definition. Again, values begin with 1 and can be increase to include as many pixels as you need (or have room for onscreen). Adding cellspacing="5" to this table gives us:


This spread the cells out a little more, so they don't appear quite so cramped. However, notice that the text inside the table almost touches the lines. This is the default for HTML tables, but you can add a little padding between the lines and the text by using the cellpadding= attribute. Available values are the same as cellspacing= values. Adding cellpadding="5" to this table gives us:


You can also add background color to the entire table by using the bgcolor= attribute in the table tag. Or you can add it to the table row tag to change all the cells in a given row...or apply it to individual cells to change only that cell's background. Adding bgcolor="#BFBFBF" to the tag of the first row and bgcolor="#bdceff" to the tag of the second cell on the last row, gives us:


Our text is (in my opinion) too large for this table, but you can't make changes to a table's text using a tag attribute the way we've made the changes above.There is no HTML attribute that can be applied to the table tag, for instance, to change the font. This must be done individually in each cell. So, to make the font smaller, you must add a font tag (see 10 - Fonts) inside each cell. It's a pain...and yet another reason to learn CSS. Adding size="2"> tags to each cell, gives us:


Notice that the text in the first row is intended to be column headings. Generally in a table, this text will be bolded and sometimes centered. You could change this text to bold by inserting tags in each of the cells on the first row. However, HTML provides a way to do this by a much cleaner method using fewer characters. This is the tag. It is used in the first row of your table code, in place of the tags. The table header tags are preformatted to include bold and centered text. Replacing the tags in this table with tags, gives us this:



As you probably noticed, the width of the table got smaller when we changed the width of the font. By default, tables will stretch to fill whatever space is necessary to hold the table's contents. Each column will expand to the size of the largest entry in the column. You can manipulate the width of a table and/or any of its columns, by including the width= attribute. Values can be designated using either number of pixels or by percentages, which would stretch the table to fit your the browser window or the table cell in which the table is nested, etc.

For example, we can change the width of this entire table by adding width="600" (as an example) to the table tag, like this:


As you can see, the cells remain proportionally similar to the entries, but we can force the left column to take up more room by adding the width= attribute to its th (or td if you aren't using a th row) tag. Since we've given the table a fixed pixel size, we'll add width="40%" (we could as easily use a set number of pixels, as well) to the left column's th tag, which will give us this:


You can even fix the height of a table by adding a height= attribute to the table tag. By adding height="150", we get this:


Okay...enough already. You get the picture, I think.