How To Change The Background Color Of A Table In Html

HTML Table Basics

Reading: Learning Spider web Pattern, Chapter 10

Uses for Tables in HTML

To present rows and columns of data (example)
To position text precisely (example)
To more than predictably arrange images, text, and other objects (case)
To force a sure layout to the web page allowing for for headings, navigational menus, advertisements, etc. (example)
To mix searchable text inside images to requite search engines more data (example)

At present, allow's figure out how to do this.

Parts of a Table

The tabular array below is a generic table with its parts labeled.

HTML Tags of a Tabular array

The rest of this document contains a summary of the near common table tags and attributes.

The table itself must be divers using the table tags <tabular array> and </table>. All of the items and attributes contained within that table must appear betwixt these ii tags.

A title or caption may exist defined for the tabular array past placing the <CAPTION>...</CAPTION> tag immediately after the <tabular array> tag.

The next layer down is to define the rows. A table's row is divers with the tags <tr> and </tr>. All of the items and attributes contained within that row of the table must appear between these two tags.

The lowest level of the table is the table information. Each item of the table is defined between the tags <td> and </td>. You lot may place just about any page component within the tabular array data tags, fifty-fifty another tabular array.

The HTML for a bones tabular array is shown below.

<table border="one">
        <caption>Table Caption</caption>
        <tr>
        <td>
        Row i, col 1 item
        </td>
        <td>
        Row 1, col 2 item
        </td>
        <td>
        Row ane, col 3 particular
        </td>
        </tr>
        <tr>
        <td>
        Row 2, col 1 item
        </td>
        <td>
        Row 2, col 2 item
        </td>
        <td>
        Row 2, col iii particular
        </td>
        </tr>
        </table>

The resulting table is shown beneath.

Table Caption
Row ane, col 1 item	Row 1, col 2 item	Row 1, col iii particular
Row 2, col one detail	Row 2, col 2 item	Row 2, col 3 particular

Annotation that I had to add the "border=1" attribute to define the cells of the tabular array with lines.

Table Attributes

The following is a brief list of the attributes definable for a tabular array. All of these attributes must be contained between the keyword "tabular array" and the greater than bracket of the <tabular array> tag.

Borders

The border effectually the exterior of the table tin can be edited by width and color. To change the width of the table'southward border, apply the attribute border="p" where p = number of pixels wide the border should be. Note that using this aspect also adds borders to the cells.

The tabular array below has a border of 10 pixels. This is done with the tabular array tag <table border="10">.

Item 1	Item 2
Item 3	Item 4

To have no edge, set up edge="0".

Particular 1	Item ii
Item iii	Particular 4

Colors and Backgrounds

To change the border's colour, employ the attribute bordercolor="color" where color is the same format equally all the other web colors we've been using. The tabular array below has the bordercolor set to #ff00ff with the tabular array tag <table bordercolor="#ff00ff">.

Item one	Item 2
Item iii	Item 4

To alter the groundwork colour, use the attribute bgcolor="color". The tabular array beneath has its background color fix to #00ff00 with a table tag of <tabular array bgcolor="#00ff00">.

Item 1	Item 2
Item three	Item 4

To set a tiled background for a table, use the background="URL", where filename is the proper noun of the tiled graphic to exist used. For example, in the aforementioned directory where these notes are found is a graphics file bg.gif. The table below uses information technology as a background by using the table tag <table background="bg.gif">

Item 1	Particular 2
Item 3	Item 4

Cell Spacing

The spacing betwixt the cells can be increased with the cellspacing="p" attribute where p equals the number of pixels to put betwixt cells. The example below obtains a prison cell spacing of ten pixels with the table tag <table cellspacing="10">

Particular 1	Item 2
Particular 3	Item 4

Prison cell Padding

The spacing around an particular within each cell tin can be increased with the cellpadding="p" attribute where p equals the number of pixels to put between the item and the end of the cell. The example below obtains a cell padding of 10 pixels with the tabular array tag <tabular array cellpadding="10">.

Detail i	Detail 2
Detail 3	Particular 4

Table Alignment

Item 1	Particular 2
Particular three	Item iv

You tin also specify how the tabular array is placed horizontally inside the browser'south window using the align aspect. Its format is align="alignment" where alignment equals left, center, or correct. If you gear up the alignment to left or correct, text flows effectually the table as it does with the table to the right of this paragraph. Center, however, does not allow text to menstruation effectually it resulting in a uncomplicated centered table as shown below.

Item 1	Item 2
Particular 3	Item 4

Table Width

Just like horizontal rules, a table'due south width can be defined in terms of a percentage of the overall browser window width or every bit a specific number of pixels. The first table uses WIDTH="50%" to define its width every bit 50% of the width of the window. (The resulting table will depend on the width of your browser window.)

Item 1	Item 2
Item three	Particular iv

The next table is defined as l pixels broad using the attribute WIDTH="50".

Item 1	Item ii
Particular 3	Item four

Table Data Attributes

The post-obit is a brief list of the attributes definable for a single jail cell of the tabular array, i.due east., a single slice of table data. All of these attributes must be contained between the keyword "td" and the greater than subclass of the <td> tag.

The table data uses the next three attributes in the same way that the tabular array tag uses them.

To modify the background color of a unmarried jail cell, use the attribute bgcolor="color" inside the <td> tag.
To add together a tiled background prototype to a single cell, employ the attribute groundwork="URL" inside the <td> tag.
To prepare the width of a single cell, apply the attribute width="w" where due west is either a percentage of the table'due south width (east.chiliad., "25%") or a stock-still number of pixels (east.g., "25").

The prison cell, however, adds a few boosted attributes. Offset, it allows the user to define the verticle and horizontal alignment of an item within a prison cell. The diagram below shows the different attributes for horizontal and vertical alignment within a cell.

Lastly, yous may strength a cell of a table to span more one column or row using the attribute COLSPAN="northward" or ROWSPAN="n" where north=the number of columns or rows to span.

This table data spans the first two columns. (COLSPAN="2")
	This table information spans the final two columns. (COLSPAN="2")

This table data spans the first ii rows. (ROWSPAN="ii")
This table data spans the first ii rows. (ROWSPAN="ii")

Embedding Tables

Equally stated before, only about any component of a web page may be inserted into a tabular array as table data. Beneath is an example of inserting a tabular array within a table.

Each of these are single table items.	Each of these are single table items.
Each of these are unmarried tabular array items.	The items below (i, 2, 3, etc.) are independent inside a "sub tabular array."

You lot embed a table merely by placing another tabular array within the <td> and </td> tags.

Developed by David Tarnoff for sections of CSCI 1710 and 5011 at ETSU