CSS Table Border

Example tables

A few examples. Padding is ommitted for clarity. See also the examples with alternative syntax.

Corresponds to HTML3 rule=all, border=1.

The second example from the HTML3 spec. (interpreted from the ASCII graphics).

table < border-top: double; border-bottom: double; border-right: blank >thead, tbody, tfoot < border-top: solid; border-bottom: solid >colgroup

A table with only vertical rules.

A table with only vertical rules between the columns.

A typical Netscape table: border=5, cellspacing=10.

NB1. 16 = 5 pixel border + 10 pixel spacing + 1 pixel shadow. Similarly, 12 = 10 px spacing + 2 shadows.

NB2. It is convenient in this case to specify the ridge as 1,10,1, which sums to 12, but 2,20,2 would have given exactly the same result.

A complex table head, but no rules in the body.

thead < border-top: solid thick; border-right: blank; /* prevent colgroup border */ border-left: blank /* prevent cell border */ >colgroup < border-right: solid thick >thead td < border: solid >tbody td < border: blank >/* remove colgroup border */ >

This example is complicated because there is no way to address the part of the colgroup in the thead. It seems we would need a sort intersection operator for that. The problem has been solved in this case by setting the border on the whole colgroup and then removing it again in the tbody.

Chris Wilson’s example 1, in his notation:

Assuming that `thin’ means 1px (not too unlikely), the table’s border will be 2px shadow + 1px padding + 1px margin + 1 px shadow = 5px. Note that I also assume that shadow colors are chosen automatically.

Chris Wilson’s example 2. In his notation:

Note that there are other ways of specifying the same. Instead of border on TR, one could have set top and bottom on each cell.

Chris Wilson’s example 3. In his notation:

Chris Wilson’s example 4. In his notation:

The shadow part seems to stick out, instead of being inside the border. That means it can overlap something else, but maybe that is a good thing. How about adding a transparency to the shadow? Here is an example style sheet:

Cell G is assumed to have an ID `G’. The keyword `override’ is used to make sure the cell’s border style is honoured. If drop shadows are always `stronger’ than dots, this keyword can be omitted.

The color difference between the border and the cell is a problem. It can be solved in several ways: (1) in HTML, by putting the cell content inside another element, such as a P or DIV and putting a background on that, or (2) introducing a border-background property, or (3) specyfing that the table background is used for the border background.

Solution 1 doesn’t work if the child elements have unequal height. With solution 2 and 3, the dotted style needs the extra parameter that was already suggested earlier, to set the dot’s diameter.

Using solution 2 (set the yellow on child elements of the cells):

Using solution 3 (table background is used for borders):

The problem here is the short red borders. It seems necessary to introduce the short rules as border types. Note that the endpoints of the rules are not aligned with the text, although that is more common in other tables.

Also the white lines seem to go underneath the green dots, but this could be a general rule any time a solid line and a dotted line cross.

An attempt using Dave’s model:

An attempt using my model:

Diagonal text and diagonal borders cannot be done without introducing some new property. Note that the cells are sheared 30°, while the text is put vertically as well.

There are several ways of looking at this table: (1) is is actually two tables instead of one, (2) there is space between the head and the body, (3) between the head and the body is a double line.

Using 3 (and assuming the border background is taken from the table background):

tr < border: .4pt >table < border: thick solid >thead < border: 14pt double(1,12,1) >thead < background: cyan >tr.odd < background: yellow >tr.even

Short horizontal rules between the cells.

td, th < border-bottom: thin short >table < border: none >/* remove bottom border */

The default for `short’ can be the cell’s padding.

Single black border in the body, white (or transparent) borders in the head. (Actually, in the original, the blue parts weren’t really aligned, they seemed to have been placed by an unsteady hand.) Bert Bos
19 April 1996

Источник

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.

Источник

Руководство CSS Tables

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- Table borders

В основном, у таблицы имеется 2 вида границы (border) это граница таблицы и граница ячеек, как в изображении ниже:

По умолчанию соседние ячейки не используют одну границу, а имеют отдельные. Так же граница таблицы отделяется от границы ячеек.

      .table1 < border: 1px solid red; >.table1 th < border: 1px solid blue; padding: 5px; >.table1 td 
HTML Table Boder
 
First Name
 
Last Name
 
 
John
 
Smith
 
 
   

CSS border-spacing применяется для чтобы определить расстояние между границами соседних ячеек.

 /* */ border-spacing: 2px; /* horizontal | vertical */ border-spacing: 1cm 2em; /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; 

      .table1 < border: 1px solid red; border-spacing: 40px; >.table1 th < border: 1px solid blue; padding: 25px; >.table1 td 
HTML Table Boder-spacing
 
First Name
 
Last Name
 
 
John
 
Smith
 
 
   

      table < border-collapse: collapse; border: 1px solid black; >th, td 
CSS Collapsed Table
 
 
 
border-style:solid; 
border-width:1px; 
border-color:blue;
 
border-style:dashed; 
border-width:1px; 
border-color:red;
 
 
 
border-style:hidden; 
border-width:1px; 
border-color:green;
 
border-style:none; 
border-width:1px; 
border-color:green;
 
 
   

 table < width: 100%; border-collapse: collapse; border: 1px solid black; >th:th:nth-child(1), th:th:nth-child(2) < width: 40%; >th:th:nth-child(3) < width: 20%; >th, td