Html table with one line border

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.

Источник

How to Add Internal Lines (Borders) in a Table With CSS

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Lisa Mildon is a Lifewire writer and an IT professional with 30 years of experience. Her writing has appeared in Geekisphere and other publications.

This article explains how to add internal lines to cells with CSS table styles. When you create a CSS table border, it only adds the border around the outside of the table.

CSS Table Borders

When you use CSS to add borders to tables, it only adds the border around the outside of the table. If you want to add internal lines to the individual cells of that table, you need to add borders to the interior CSS elements. You can use the HR tag to add lines inside individual cells.

To apply the styles covered in this tutorial, you need a table on a webpage. Then, you create a style sheet as an internal style sheet in the head of your document (if you are dealing with only a single page) or attached to the document as an external style sheet (if the site has multiple pages). You put the styles to add interior lines into the style sheet.

Before You Start

Decide where you want the lines to appear in the table. You have several options, including:

• Surrounding all the cells to form a grid
• Positioning the lines between just the columns
• Just between the rows
• Between specific columns or rows.

You can also position the lines around individual cells or inside individual cells.

You’re also going to need to add the border-collapse property to your CSS for your table. This will collapse the borders to a single line between each cell and allow table row borders to function properly. Before you do anything, add the following block to your CSS.

table border-collapse: collapse;
>
 

How to Add Lines Around All the Cells in a Table

To add lines around all cells in your table, creating a grid effect, add the following to your stylesheet:

How to Add Lines Between Just the Columns in a Table

To add lines between the columns to create vertical lines that run from top to bottom on the table’s columns, add the following to your stylesheet:

If you don’t want vertical lines to appear on the first column, you can use the first-child pseudo-class to target only those elements that appear first in their row and remove the border.

td:first-child, th:first-child border-left: none;
>
 

How to Add Lines Between Just the Rows in a Table

As with adding lines between the columns, you can add horizontal lines between rows with one simple style added to the style sheet, as follows:

To remove the border from the bottom of the table, you would once again rely on a pseudo-class. In this case, you’d use last-child to target only the final row.

tr:last-child border-bottom: none;
>
 

How to Add Lines Between Specific Columns or Rows in a Table

If you only want lines between specific rows or columns, you can use a class on those cells or rows. If you’d prefer a little cleaner markup, you can use the nth-child pseudo-class to select specific rows and columns based on their position.

For example, if you only want to target the second column in each row, you can use nth-child(2) to apply CSS to only the second element in every row.

td:nth-child(2), th:nth-child(2) border-left: solid 2px red;
>
 

The same applies to the rows. You can target a specific row using nth-child.

tr:nth-child(4) border-bottom: solid 2px green;
>
 

How to Add Lines Around Individual Cells in a Table

While you certainly can use pseudo-classes to target individual cells, the easiest way to handle a situation like this is with a CSS class. To add lines around individual cells, you add a class to the cells you want a border around:

Then add the following CSS to your stylesheet:

How to Add Lines Inside Individual Cells in a Table

If you want to add lines inside the contents of a cell, the easiest way to do this is with the horizontal rule tag (

Useful Tips

If you’d prefer to control the gaps between your table’s cells manually, remove the following line from before:

This attribute is great for standard tables, but it is significantly less flexible than CSS, as you can only define the width of the border and can only have it around all cells of the table or none.

More on CSS and HTML Tables

You may have heard that CSS and HTML tables do not mix. This is not the case. Yes, using HTML tables for layout is no longer a web design best practice because they have been replaced by CSS layout styles, but tables are still the correct markup to use to add tabular data to a webpage.

Because so many web professionals shy away from tables thinking they are nothing but trouble, many of those professionals have little experience working with this common HTML element, and they struggle when they have to add internal lines to table cells on a webpage.

Источник