HTML Table Background Color

Trang chủ » Html Css Table Column Background Color » HTML Table Background Color

Có thể bạn quan tâm

HTML Table Background Color

This page contains HTML table background color code. These are HTML codes for specifying or changing the background color of your tables within your blog or web page.

In HTML, table background color is specified using Cascading Style Sheets (CSS). In particular, you use the CSS background-color property to set the background color for your table. You can also specify a separate background color for your table rows and table cells if you like.

Background Color for the Whole Table

To change the background color of the whole table, use the background-color property against the table tag.

<table style="width:100%;text-align:left;background-color:gold;"> <tr> <th>Table Header</th> <th>Table Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table>

View Output

Background Color of a Table Row

To change the background color of a table row, you apply the same code, but to the table row in question (i.e. the tr tag).

Here we also use border-collapse:collapse; to collapse the border.

<table style="width:100%;text-align:left;border-collapse:collapse;background-color:gold;"> <tr style="background-color:yellowgreen;color:white;"> <th>Table Header</th> <th>Table Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table>

View Output

Background Color of a Single Cell

To change the background color of a single table cell, you apply the same code, but to the table cell in question (i.e. the td tag or the th tag, depending on whether the cell is a normal table data row or part of a table header).

<table style="width:100%;text-align:left;background-color:gold;"> <tr> <th>Table Header</th> <th>Table Header</th> </tr> <tr> <td>Table cell</td> <td style="background-color:yellowgreen;color:white;">Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table>

View Output

Using Classes

The above examples use inline style sheets to set the CSS properties. This is only because it makes it easier for demonstration purposes. I strongly encourage you to use a CSS class defined in an external style sheet to set your styles. Even embedded style sheets are usually better than inline.

Here's an example of setting the table's background color and other properties using a CSS class.

<!DOCTYPE html> <html> <head> <title>Example</title> <!-- CSS --> <style> .myTable { width: 100%; text-align: left; background-color: lemonchiffon; border-collapse: collapse; } .myTable th { background-color: goldenrod; color: white; } .myTable td, .myTable th { padding: 10px; border: 1px solid goldenrod; } </style> </head> <body> <!-- HTML --> <table class="myTable"> <tr> <th>Header</th> <th>Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table> </body> </html>

View Output

HTML Reference

  • Screenshot of HTML code

    HTML Tutorial

    Free HTML tutorial that explains how to code in HTML.

    This tutorial explains what HTML elements and attributes are, and how to use them.

    I explain the basics, such as what you need in order to write HTML and how to create your first web page.

    I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.

    I also explain the difference between HTML and CSS (and when to use each one).

    Go to HTML Tutorial
  • Screenshot of HTML tags

    HTML Tags

    Full list of all HTML elements.

    This is an alphabetical list of HTML elements, linking to a full page of details for each element.

    All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).

    Go to HTML Tags
  • Screenshot of CSS Properties

    CSS Properties

    Full list of CSS properties.

    Alphabetical list of CSS properties as per the W3C specifications.

    CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.

    You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.

    Go to CSS Properties

Từ khóa » Html Css Table Column Background Color