Html table header border color

HTML Table Border

This page contains HTML table border code — HTML codes for specifying or changing the border of your tables within your blog or web page.

HTML table borders are specified using Cascading Style Sheets (CSS). To set the border of an HTML table, use the CSS border property.

Typical Table Border

Here’s a common way to set borders on a table:

This provides that «grid» like effect, where the border surrounds each cell as well as the whole table.

Notice that I used border-collapse: collapse; against the table element. This collapses the border so that you don’t see any space between the cells and the outside of the table.

Without Collapsing the Border

Here it is without collapsing the border. I’ve also applied the border against the table element in order to demonstrate the effect:

You can see that I’ve also added padding to the th and td selectors but not to the table itself. If we include the padding against the table, we’d end up with extra padding between the outer cells and the outside of the table.

There’s nothing wrong with that if that’s what you want. However, if you don’t want padding between the table and its cells, you’ll need to apply the padding to just the cells.

Bottom Border

The above examples use the CSS border property to set the borders. This is a shorthand property to set border width, style, and color on all sides of the table.

If you don’t want the border to go all around the table (or if you want a different border on each side of the table), you can use any of the following properties: border-top , border-right , border-bottom , and border-left .

Here’s an example of setting the border to only appear at the bottom of each table cell.

Border and Alternating Background Colors

A common usage of tables is for each row to have alternating background colors.

You can apply borders against these tables just like any other table:

No Border on Table Headers

You can also remove the border from the th element.

You can either remove the border from the styles by using border: none; against the th selector (but it has to follow the border declaration), or just not apply the border in the first place.

Here’s an example of the later:

Rounded Corners

Here’s an example of adding a border with curved/rounded corners to the table. In the CSS3 specification, rounded corners are specified using the border-radius property.

Note that we need to remove the border-collapse property for this work.

I also set the border-spacing property to zero, so that the cell borders continue smoothly without being interrupted by a space. Remove this property and click Run to see what I mean.

The Border Properties

CSS provides quite a number of border related properties to assist you in creating borders. These properties can be applied to any HTML element, not just tables.

For a full list of border properties, go to CSS Properties and filter by «border».

Related

Источник

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table , th , and td elements:

Example

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

This will make the borders collapse into a single border:

Example

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Skip the border around the table by leaving out table from the css selector:

Example

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

Example

Border Color

With the border-color property, you can set the color of the border.

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.

Источник

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.

Источник

Table Border

This page demonstrates how to set the table border within your web pages and other HTML documents.

In HTML, there are two ways of adding a border to your tables. The first is to use the HTML border attribute. The other is to use CSS.

Below are some examples of applying a table border in HTML.

HTML Table Border

You can get a quick border around your table by using the HTML border attribute. You determine the width of the border using a number. For example, for a thin border, use the number «1». For a thicker border, use a greater number.

As you can see, this is a quick and easy way to get a table border, but you don’t actually have any control over the way the border looks. The way it looks will depend on the user’s browser and you won’t be able to change it. Unless.

If you want to change the way your table border looks, you can use CSS. CSS allows you to change the color, width, and style of your table borders.

Using CSS, you use the border property to define the table border. You can apply this property against the whole table or each cell (or a single cell, if that’s what you prefer).

CSS Table Border

You can also change the border style to thick, dotted, dashed, or anything that CSS understands. You can change its color too. Here’s some examples:

Borders on Table Cells

To the table cells within the table, you need to apply the border code against the individual table cells.

In the following example, I’ve applied a border against the table cells and the table header cells. I’ve also applied a different colored border around the table (as I did in the previous example). The different color will help distinguish between the table border and the cell borders:

Border Collapse

You can remove the space between the different borders by using the CSS border-collapse property. You can apply this property against the HTML table element.

When you apply this against the table element, you’ll notice that the table border simply disappears, or «collapses». You’ll also notice that the space between the cells collapse too.

Using CSS Classes

If you’re familiar with HTML and CSS, you’ll probably know about the benefits of CSS classes. CSS classes allow you to set all your styles in one place, rather than adding them to each HTML element as you code. This saves time in coding and time in maintaining your website. It also reduces the possibility of error, helps with download time, and helps keep your code nice and clean.

Here’s an example of using an embedded style sheet to define the border of your HTML tables. Note that the styles are set in between the opening and closing tags.

Another Example

Here are more examples of using CSS borders around your HTML tables.

Источник

Атрибут bordercolor

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник