HTML- Modifying the Table Border, Alignment, Cellspacing and Cellpadding

As you have observed, the created table in the previous lesson has an invisible boundary. To make the boundary visible you can use the border attribute, there are other attributes used in modifying some properties of table and those will be discussed in this lesson.

To see how to change the border size of your table and its other properties, open your text editor now and key in the next code.

<html>
<head>
<title>Tables</title>
</head>
<body>
Ubuntu Versions:
<table border="3" cellpadding="10" cellspacing="10">
 <tr><th>Code Name</th>
 <th>Version</th></tr>
 <tr><td>Maverick Meerkat</td>
 <td>10.10</td></tr>
 <tr><td>Lucid Lynx</td>
 <td>10.04</td></tr>
 <tr><td>Karmic Koala</td>
 <td>9.10</td></tr>
 <tr><td>Jaunty Jackalope</td>
 <td>9.04</td></tr>
</table>
</body>
</html>

The previous code that you have been keyed in will be rendered this way in Mozilla Firefox.

About the code:

The attribute border=”number” specifies the thickness of the table’s border, in our example the border is 3 pixels.
The attribute cellspacing=”number” specifies the distance between the cells hence it is called cellspacing.
The attribute cellpadding=”number” specifies the distance between the cell boundary and the cell content.
Another attribute of the <table> and <td> tag is width, it is used to change the width of the table or each column of the table. Its value could be represented in per cent (%) or in pixel.

Example:

<table width=”100%” > — the table will be expanded to the width of the browser screen (100% of the width of the screen).
<table width=”300”> — without the unit, this will tell the browser that you are using pixel as the unit. The table width is about 300 pixels.
<td width=”100”> — this means that the width of the column is 100 pixels.

Additional attribute of the <table> and <td> tag is the bgcolor=”color” (used to change the background color of cell or table) and background=”url of the image ” (used to add background image on your table or cell.

Example

To add background color to your table: <table bgcolor=”red”> or

<table bgcolor=”#FF0000”>

To add background color to your cell: <td bgcolor=”blue”> or

<td bgcolor=”#0000FF”>
To add background image to your table: <table background=”url”> or <td background=”url”>

*url is the location of the image.

Aligning Table

The default alignment for table is left just like the default alignment of text. With the align attribute of table element we can change the position of table either center or right alignment. See the next code and preview.

<html>
<head>
<title>Tables</title>
</head>
<body>
<table align="left" border="1" cellspacing="0" 
cellpadding="0">
<tr><td>left</td><td>align</td></tr>
<tr><td>text</td><td>text</td></tr>
</table><br />

<table align="right" border="1" cellspacing="0" 
cellpadding="0">
<tr><td>right</td><td>align</td></tr>
<tr><td>text</td><td>text</td></tr>
</table><br />

<table align="center" border="1" cellspacing="0" 
cellpadding="0">
<tr><td>center</td><td>align</td></tr>
<tr><td>text</td><td>text</td></tr>
</table>
</body>
</html>

Code previewed in a browser.

About the code:

The attribute align=”left” is used to place the table at the left side of the webpage. Since the default alignment of table is left there is no need to place this attribute to left align it.
The attribute align=”center” is used to place the table at the center of your webpage.
The attribute align=”right” is used to place the table at the right of your webpage.

Spanning Rows and Columns

Sometimes it is necessary to merge or combine one or two nearby cells to make it a single cell. This method of combining nearby cells into one is called as spanning. Merging cells vertically down is called as rowspan, while merging cells horizontally across is called as colspan. On the illustration below is a sample preview of tables that use rowspan and colspan attribute.

Key in the next code to learn the process of spanning rows and columns using the rowspan and colspan attributes.

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">

<tr> <td colspan="2">text</td>   <td>text</td> </tr>
<tr> <td>text</td>   <td>text</td> <td>text</td> </tr>
</table>
<br />

<table border="1" cellspacing="0" cellpadding="5">

<tr> <td rowspan="2">text</td> <td>
text</td> <td>text</td> </tr>
<tr>     <td>text</td> 
<td>text</td> </tr>

</table>
</body>
</html>

Note that the code is so aligned (illustration above) in order for you to understand rowspan and colspan better.

About the code:

The attribute colspan=”2” is used to merge the first two column of the first row.
The attribute rowspan=”2” is used to merge the first two rows of the first column.

Below is an illustration explaining how to use colspan and rowspan in a table.

Illustration A. Coding with rowspan

Illustration B. Coding with colspan

Colspan and Rowspan Combined

Illustration C. Coding with colspan and rowspan

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
  <tr>
    <td>yes</td>
    <td colspan="3">yes</td>
  </tr>
  <tr>
    <td rowspan="2">yes</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
  </tr>
</table>
</body>
</html>

The page preview of the code above in Mozilla Firefox. The code above is the code used to create the page below. The code is the same with illustration C above.

October 23, 2011