- Table Color
- Table Background Color
- Table Row Color
- Table Cell Background Color
- Table Text Color
- Table Border Color
- Table Color with CSS Classes
- Атрибут bgcolor
- Аналог CSS
- Типы тегов
- Атрибут bordercolor
- Типы тегов
- HTML Tag
- Definition and Usage
- Browser Support
- Global Attributes
- Event Attributes
- More Examples
- Example
- Example
- Example
- Example
- Example
- Example
- Example
- Example
- Example
- Related Pages
- Default CSS Settings
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Colorizing a HTML Table
- Background color of the cell
- Font color
- HTML color codes
Table Color
This page demonstrates how to set the table color within your web pages and other HTML documents.
In HTML, table color is defined using Cascading Style Sheets (CSS). You can change the color of the whole table, part of the table (eg, table cells or table borders), and the text within the table cells.
The CSS property to use will depend on which element you’re changing the color of. For example, to change the background color, you need to use the background-color property. To change the color of the text within the table, simply use the color property.
Below are some examples of applying a table border in HTML.
Table Background Color
You can use the CSS background-color property to change the background color of the whole table.
Table Row Color
You can change the background color of a table row:
Table Cell Background Color
You can change the background color of an individual table cell:
Table Text Color
You can change the color of text within a table. To change the color of the text within the table, you need to use the color property. By the way, you don’t need to apply this element against each piece of text — you can apply it to the whole table.
In this example, I change the color of the text to black, but I also change the table header text to white:
Table Border Color
You can set a table border and change its color too. To do this, you can use the border property. You also need to specify how wide the border is and what style.
In the following example, we use CSS classes to set the border color and other properties against the table and its cells.
Table Color with CSS Classes
You should use CSS classes where ever possible when setting styles for your HTML documents. You can define these classes in an embedded style sheet or external style sheet.
Here’s an example of using an embedded style sheet to define the styles of your HTML tables. Note that the styles are set in between the opening and closing tags.
Атрибут bgcolor
Зависит от браузера и его версии, обычно используется белый цвет фона.
Аналог CSS
.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибут bordercolor
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
HTML Tag
A simple HTML table, containing two columns and two rows:
More «Try it Yourself» examples below.
Definition and Usage
An HTML table may also include , , , , and elements.
Browser Support
Global Attributes
Event Attributes
More Examples
Example
How to add collapsed borders to a table (with CSS):
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Example
How to right-align a table (with CSS):
Example
How to center-align a table (with CSS):
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Example
How to add background-color to a table (with CSS):
Example
How to add padding to a table (with CSS):
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Example
How to set table width (with CSS):
Example
How to create table headers:
Example
How to create a table with a caption:
Example
How to define table cells that span more than one row or one column:
Related Pages
Default CSS Settings
Example
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Colorizing a HTML Table
In this post you will be shown how you can edit the font color and the background color of the cells as you wish.
In order to make a HTML table visually appealing, you can colorize it. In this post you will be shown how you can edit the font color and the background color of the cells as you wish.
For example, I added a table of the current Formula1 team standings down below. To recognize the teams more easily, I colorized the cells in the team colors.
Additionally, I changed the font color of «Ferrari» and «Red Bull» to white, in order to get a better contrast.
| Team | Points |
|---|---|
| Mercedes | 438 |
| Ferrari | 288 |
| Red Bull | 244 |
The HTML code for this table looks like this:
Team Points Mercedes 438 Ferrari 288 Red Bull 244
Background color of the cell
In order to change the background color of a cell to silver, you have to change the brackets to . After that, you enter the regular text that should be displayed in the cell.
Font color
Changing the font color to white demands changing the brackets to . In the given example this was combined with a new background color. Several attributes are seperated by blank characters:
HTML color codes
The colors in HTML can be adressed in different ways. On one hand it is possible to just name the color, like «silver» or «darkblue». This works well, but results in a relatively small color palette.
It is also possible to use HTML color codes. This way, the color can be defined exactly, like I did above with «Ferrari». In this case it is not simply «red», but the color code #DF0101. On the website HTML-Color-Codes you can get the color code for any color.