Microsoft.NET

……………………………………………….Expertise in .NET Technologies

HTML Tables – Part 4

Posted by Ravi Varma Thumati on December 15, 2009

HTML Tables

Tables may seem difficult at first, but after working through this lesson you’ll see how they aren’t too bad. The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Tables are a handy way to create a site’s layout, but it does take some getting used to. Here’s how to make a table.

HTML Code:

<table border=”1″>

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>

<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>

Basic Table:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Content is placed within tables cells. A table cell is defined by <td> and </td>.The border attribute defines how wide the table’s border will be.

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows and colspan to span multiple columns.

Note: if you would like to place headers at the top of your columns, use the <th> tag as shown below. By default these headers are bold to set them apart from the rest of your table’s content.

HTML Code:

<table border=”1″>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan=”2″>Row 1 Cell 1</td>

<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>

<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>

<tr><td colspan=”3″>Row 3 Cell 1</td></tr>

</table>

Colspan and Rowspan:

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Cell Padding and Spacing

With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within. Color has been added to the table to emphasize these attributes.

HTML Code:

<table border="1" cellspacing="10"

bgcolor=”rgb(0,255,0)”>

<tr>

<th>Column 1</th>

<th>Column 2</th>

</tr>

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>

<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>

Cellspacing and Padding:

Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

And now we will change the cellpadding of the table and remove the cellspacing from the previous example.

HTML Code:

<table border="1" cellpadding="10"

 bgcolor="rgb(0,255,0)">

<tr>

<th>Column 1</th>

<th>Column 2</th>

</tr>

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>

<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>

Cell Pads:

Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

The value you specify for padding and spacing is interpreted by the browser as a pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels.

HTML Color – bgcolor

The bgcolor attribute is used to control the background of an HTML elmement, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you only use it for your page’s main background (<body>) and in tables.  The HTML to change the background color is simple:

Syntax

<TAGNAME bgcolor=”value”>

Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.

HTML Code:

<body bgcolor=”Silver”>

<p>We set the background…</p>

</body>

Paragraph Bgcolor:

We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!

Adding Color to Your Tables

This example shows how to add a background color for an entire table using generic values of color.

HTML Code:

<table bgcolor=”lime” border=”1″><tr>

<td>A lime colored table background using color names.</td>

</tr></table>

<table bgcolor=”#ff0000″ border=”1″><tr>

<td>A red colored table background using hexadecimal values “#FF0000”.</td>

</tr></table>

<table bgcolor=”rgb(0, 0, 255)” border=”1″><tr>

<td>A blue colored table background using RGB values “rgb(0, 0, 255)”.</td>

</tr></table>


Table Bgcolors:

A lime colored table background using color names.
A red colored table background using hexadecimal values “#FF0000”.
A blue colored table background using RGB values “rgb(0, 0, 255)”.

Adding Color to Table Rows & Columns

Here’s a few common examples of “bgcolor” and font color

HTML Code:

<table>

<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>

<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>

<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>

<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>

<tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>

<tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>

</table>

Alternating Colors:

This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!

HTML Color Chart

Below is the hexadecimal representation for an array of HTML background colors. The hexadecimal value that you see displayed in each box represents the value to get the background color of that cell.

Advertisements

One Response to “HTML Tables – Part 4”

  1. I quite simply enjoy this web site, the information is rich as well as significant, many thanks for publishing these terrific posts 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: