Html table borders top and bottom

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.

Источник

How to Add Border to HTML Table

After creating an HTML table, you should add a border to it, as borders are not added by default. First, let’s see an example, where we use the HTML border attribute.

Example of creating an HTML table with the border attribute:

html> html> head> title>Title of the document title> head> body> table border="1"> tr> th>Person th> th>Age th> tr> tr> td>Ann td> td>19 td> tr> tr> td>Susie td> td>22 td> tr> table> body> html>

Result

Anyway, we recommend using the CSS border property for adding a border to your tables. To add a border to your table, you need to define the of your table.

Remember to add borders also for and tags to have a complete table. Set the border-collapse property as well (if you don’t define the border-collapse, it will use border-collapse: separate by default).

Example of creating borders for the HTML table:

html> html> head> title>Title of the document title> style> table, th, td < padding: 10px; border: 1px solid black; border-collapse: collapse; > style> head> body> table> tr> th>Person th> th>Age th> tr> tr> td>Ann td> td>19 td> tr> tr> td>Susie td> td>22 td> tr> table> body> html>

How to change the HTML table border style with CSS

You can give styling to your table using the CSS border shorthand property, or the border-width, border-style, border-color properties, separately. See the example below to have a visible result of these properties.

Example of changing the HTML table border style with CSS:

html> html> head> title>Title of the document title> style> table < border-style: ridge; border-width: 150px; border-color: #8ebf42; background-color: #d9d9d9; > th < border: 5px solid #095484; > td < border: 20px groove #1c87c9; > style> head> body> table> tr> th>Person th> th>Age th> tr> tr> td>Ann td> td>19 td> tr> tr> td>Susie td> td>22 td> tr> table> body> html>

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

Example of adding bottom borders to the HTML table:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; > td, th < padding: 10px; border-bottom: 2px solid #8ebf42; text-align: center; > style> head> body> table> tr> th>Person th> th>Age th> tr> tr> td>Ann td> td>19 td> tr> tr> td>Susie td> td>22 td> tr> table> body> html>

How to have rounded borders

You can also have rounded borders by using the CSS border-radius property. Remember that in this case, you should remove the border-collapse property to work properly. Let’s see an example where all the table elements are rounded.

Example of adding rounded borders to the HTML table:

html> html> head> title>Title of the document title> style> table, td, th < padding: 10px; border: 2px solid #1c87c9; border-radius: 5px; background-color: #e5e5e5; text-align: center; > style> head> body> table> tr> th>Person th> th>Age th> tr> tr> td>Ann td> td>19 td> tr> tr> td>Susie td> td>22 td> tr> table> body> html>

How to add border to the

,

or elements

In the same way you can add a border to other HTML elements. Let’s see an example of adding borders to the , and elements.

Example of adding borders to the

, and elements:

html> html> head> title>Title of the document title> style> h2, div, p < padding: 10px; > h2 < border: 3px double #1c87c9; background-color: #d9d9d9; > div < border-left: 5px solid #1c87c9; background-color: #cccccc > p < border: 10px groove #8ebf42; > style> head> body> h2>Border Example h2> div> Div example for the border property. div> p>Some paragraph with border. p> body> html>

If you want to have a rounded border on paragraphs, follow the example below to learn how to do it. Use the border-radius property to have your preferred outcome.

Example of creating rounded borders on paragraphs:

html> html> head> title>Title of the document title> style> p < padding: 10px; > p.normal < border: 2px solid #1c87c9; > p.round1 < border: 2px solid #1c87c9; border-radius: 5px; > p.round2 < border: 2px solid #1c87c9; border-radius: 8px; > p.round3 < border: 2px solid #1c87c9; border-radius: 12px; > style> head> body> h2>Rounded borders h2> p class="normal">Normal border p> p class="round1">Round border p> p class="round2">Rounder border p> p class="round3">Roundest border p> body> html>

Источник

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

Источник