Html table display borders

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>

Источник

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 Border in HTML

Table Border in HTML is used to display a border around the table contents. This can be set around the table by specifying values like 0 for no border is showing around the table cells, whereas value 1 is set to display a border around the table cells. Table width can be set in number values to define how much thick border users want to give around their table. One can set border either to the whole table or to a specific row or column or only for the table head; everything is possible.

Syntax of the Table Border in HTML

There are multiple ways for defining table-border; let’s see the syntax for them one by one:

Web development, programming languages, Software testing & others

1. General Table border: This is generally used to define a simple border around the table like:

2. Collapsible Table border: This property is used to set a collapsible border in a single line around our table using the border-collapse property.

3. The border around the table: This property allows us to add table border only at outside edges, not to each individual table cells, simply as :

4. Dotted table border: one can simply add a dotted outline as a border to their table by using simply the following syntax as :

5. Dashed table border: Like dotted, we can set the dashed border around our table or table cells. This could be thin or thick as per user choice by setting value.

6. Double table border: If we want to add a double outline to our table, then it also possible by setting a property within CSS code and give a double border around the table.

7. Table border around table cells: This syntax helps us give a border around the individual cells or any specific table cell with your favorite color code. In this syntax, we want to add border code value with each cell separately.

8. Table border with CSS classes: rather than setting the border to each individual table cells, CSS classes helps us to give common border code to our table. This can be done by using the following syntax:

9. Table bottom border: This property of the table border is used to give horizontal dividers among the table’s th and td tag as follows:

10. Rounded table border: It will show rounded corners to the table border.

Examples of Table Border in HTML

Following are the examples of Table Border

Example #1

The following example is showing two different tables with different borders. The first table is showing a normal border around the table, whereas the second table is an example of a collapsible table border format.

   .collapsetable  
Genral Table Border
 
SR.NO
 
NAME
 
Education
 
AGE
 
 
1
 
Dinesh
 
BCA
 
26
 
 
2
 
Raj
 
CA
 
30
 
 
3
 
Deepti
 
ME
 
28
 
 
4
 
Akhilesh
 
B.com
 
21
 
 
5
 
Sara
 
MBA
 
26
 
 
 
 
Collapsible Table Border
 
Emp Code
 
Emp Name
 
Job Title
 
Salary(LPA)
 
 
911
 
Zoya Shaikh
 
Developer
 
3.6
 
 
912
 
Lisa Dev
 
Tester
 
2.8
 
 
913
 
Deepak Jadeja
 
Digital Marketing
 
5.2
 
 
914
 
Aditi Yewale
 
Developer
 
4
 
 
915
 
Simren Rao
 
HR
 
5.6
 
 
  

Example #2

This example is showing how to set the border to the table only for the outside part with different table border types:

  table 
Table with outside border
 
 
Index
 
Seasons
 
Durations
 
 
1
 
Summer
 
4 months
 
 
2
 
Rainy Seasons
 
4 months
 
 
3
 
Winter
 
4 months
 
 
 
Table with dotted border
 
 
Index
 
Seasons
 
Durations
 
 
1
 
Summer
 
4 months
 
 
2
 
Rainy Seasons
 
4 months
 
 
3
 
Winter
 
4 months
 
 
 
Table with dashed border
 
 
Index
 
Seasons
 
Durations
 
 
1
 
Summer
 
4 months
 
 
2
 
Rainy Seasons
 
4 months
 
 
3
 
Winter
 
4 months
 
 
 
Table with double border
 
 
Index
 
Seasons
 
Durations
 
 
1
 
Summer
 
4 months
 
 
2
 
Rainy Seasons
 
4 months
 
 
3
 
Winter
 
4 months
 
 
 

Output: This output showing a table with dotted, dashed and double border to the outside of the table.

Example #3

Example showing table cells bordered in different color individual as:

   table < border: 3px solid red; >th < border: 2px solid blue; >td 
Table border around Cell
 
 
First Name
 
Last Name
 
City
 
 
Rita
 
Mishra
 
Mumbai
 
 
Rashmi
 
Patil
 
Nagpur
 
 
Kartik
 
Dev
 
Pune
 
 
  

Example #4

Another table rounded border with a border as the horizontal divider

   .round < border-radius: 15px; border: 2px solid purple; padding: 5px; >th, td 
Table border around Cell
 
 
Cake
 
Weight
 
Price
 
 
Chocalate
 
1/2 kg
 
400/-
 
 
Rasmalai
 
1 kg
 
850/-
 
 
  

Conclusion

• The table border in HTML is set by assigning value 1 to display a border around the table, whereas 0 to hide a border around the table.
• One can set a border around the table in various types like simple thick or thin border, collapsible, dotted, double, dashed borders.

Recommended Articles

This is a guide to Table Border in HTML. Here we discuss multiple ways for defining table border with respective syntax and the examples of the Table Border in HTML. You can also go through our other related articles to learn more–

89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

HTML & CSS Course Bundle — 33 Courses in 1 | 9 Mock Tests
125+ Hours of HD Videos
33 Courses
9 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник