To change the color of a cell in a table, which of the following should be done?

To force a certain layout to the web page allowing for for headings, navigational menus, advertisements, etc. (example)

Now, let's figure out how to do this.

Parts of a Table

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

HTML Tags of a Table

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

The table itself must be defined using the table tags and.  All of the items and attributes contained within that table must appear between these two tags.

A title or caption may be defined for the table by placing the ... tag immediately after the tag.

The next layer down is to define the rows.  A table's row is defined with the tags

The lowest level of the table is the table data.  Each item of the table is defined between the tags

The HTML for a basic table is shown below.

The resulting table is shown below.

Note that I had to add the "border=1" attribute to define the cells of the table with lines.

Table Attributes

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

Borders

The border around the outside of the table can be edited by width and color.  To change the width of the table's border, use the attribute border="p" where p = number of pixels wide the border should be.  Note that using this attribute also adds borders to the cells.

The table below has a border of 10 pixels. This is done with the table tag

To have no border, set border="0".

Colors and Backgrounds

To change the border's color, use the attribute bordercolor="color" where color is the same format as all the other web colors we've been using. The table below has the bordercolor set to #ff00ff with the table tag

To change the background color, use the attribute bgcolor="color". The table below has its background color set to #00ff00 with a table tag of

To set a tiled background for a table, use the background="URL", where filename is the name of the tiled graphic to be used. For example, in the same directory where these notes are found is a graphics file bg.gif. The table below uses it as a background by using the table tag

Cell Spacing

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

Cell Padding

The spacing around an item within each cell 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 table tag

Table Alignment

You can also specify how the table is placed horizontally within the browser's window using the align attribute. Its format is align="alignment" where alignment equals left, center, or right. If you set the alignment to left or right, text flows around the table as it does with the table to the right of this paragraph. Center, however, does not allow text to flow around it resulting in a simple centered table as shown below.

Table Width

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

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

Table Data Attributes

The following is a brief list of the attributes definable for a single cell of the table, i.e., a single piece of table data. All of these attributes must be contained between the keyword "td" and the greater than bracket of the

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

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

• To change the background color of a single cell, use the attribute bgcolor="color" inside the

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

Lastly, you may force a cell of a table to span more than one column or row using the attribute COLSPAN="n" or ROWSPAN="n" where n=the number of columns or rows to span.

Embedding Tables

As stated earlier, just about any component of a web page may be inserted into a table as table data. Below is an example of inserting a table within a table.

Can we change the background color of a single cell in a table?

Which coding can help to apply background color to a specific cell in a table?

Which option is used to change the Shading color of table?