Html table tr style bgcolor

HTML тег

Обратите внимание, что все строки таблицы содержат одинаковое количество ячеек, которое соответствует количеству ячеек самой длинной строки. Если в одной строке содержится меньше ячеек, чем в других строках, то браузер автоматически заполнит строку, помещая пустые ячейки в конец этой же строки.

Синтаксис

Пример

html> html> head> title>Заголовок документа title> head> body> table border="1"> tr> th>Месяц th> th>Дата th> tr> tr> td>Январь td> td>10.01.2018 td> tr> tr> td>Февраль td> td>10.02.2018 td> tr> table> body> html>

Результат

Атрибуты

Атрибут	Значение	Описание
align	right left center justify char	Указывает способ выравнивания содержимого ячеек. Не поддерживается в HTML5.
bgcolor	bgcolor	Определяет цвет фона ячеек. Не поддерживается в HTML 5.
bordercolor	bordercolor	Определяет цвет рамки. Не поддерживается в HTML 5.
char	character	Указывает способ выравнивания содержимого ячеек по заданному символу. Используется только, если атрибут align = «char». Не поддерживается в HTML 5.
charoff	number	Смещает содержимое ячеек относительно указанного символа. Используется, если атрибут align = «char». Не поддерживается в HTML 5.
valign	top middle bottom baseline	Выравнивает содержимое внутри элемента по вертикали. Не поддерживается в HTML 5.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

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.

Источник

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.

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.

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).

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.

Источник

HTML Tag

A simple HTML table with three rows; one header row and two data rows:

More «Try it Yourself» examples below.

Definition and Usage

Browser Support

Global Attributes

Event Attributes

More Examples

Example

Example

How to add background-color to a table row (with CSS):

Example

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

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.

Источник