Html table with lines as border

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.

Источник

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.

Источник

Html table with single line border in html

Output: Solution 1: Try to unborder middle table, not tr or td. Also add negative margin to middle div Solution 2: You can use to merge the borders, then using the selector, choose all tables except the one in the last DIV, to remove their bottom borders (in css, not js): example: https://codepen.io/anon/pen/EqNMNm The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi .)

Giving a border to an HTML table row,

You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table . The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse .)

Thus, you need to use collapsing borders. Example:

on which ever row you like. Here’s a fiddle.

Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.

Yes. I updated my answer DEMO

table td < border-top: thin solid; border-bottom: thin solid; >table td:first-child < border-left: thin solid; >table td:last-child

How to apply border inside a table ?, There are two ways to apply border inside the table in HTML. Only Using HTML: In this case, we will use rules attribute of table. Rules is the

CSS Table Border Tutorial — Better Than HTML Table Borders

But adding border’s to tables can be a little tricky. By that I mean you have add borders to
Duration: 8:41

HTML: Tables with borders

Dr. Mark shows how to dress up a table with borders and headings.Enroll in the HTML Prep Duration: 4:17

How to Change HTML Table Border Style

How to make table with only border line and vertical line html

Insert This codes:

td:not(:last-child),th:not(:last-child) < border-right: 1px solid blue; >table < border-collapse: collapse; //more code >

td, th < text-align: left; padding: 8px; >td:not(:last-child),th:not(:last-child) < border-right: 1px solid blue; >table

 
 
Company
 
Contact
 
Country
 
 
Alfreds Futterkiste
 
Maria Anders
 
Germany
 
 
Centro comercial
 
Francisco Chang
 
Mexico
 
 
Ernst Handel
 
Roland Mendel
 
Austria
 
 

Add border-collapse:collapse in table, this collapsed the border of table into single border and then you can add border-right to td, th tag.

td, th < text-align: left; padding: 8px; >th:nth-child(1), td:nth-child(1) < border-right:1px solid blue; /*Add this*/ >th:nth-child(2), td:nth-child(2) < border-right:1px solid blue; /*Add this*/ >table< border: 1px solid #dddddd; border-collapse:collapse;/*Add this*/ >

 
 
Company
 
Contact
 
Country
 
 
Alfreds Futterkiste
 
Maria Anders
 
Germany
 
 
Centro comercial
 
Francisco Chang
 
Mexico
 
 
Ernst Handel
 
Roland Mendel
 
Austria
 
 

The Table Row element — HTML: HyperText Markup Language, Similarly, you can use the rowspan attribute on cells to indicate they should span more than one table row. This can take a little practice to get right when

Border around specific rows in a table?

How about tr ? Works for me on tr or tbody elements, and appears to be compatible with the most browsers, including IE 8+ but not before.

Thank you to all that have responded! I’ve tried all of the solutions presented here and I’ve done more searching on the internet for other possible solutions, and I think I’ve found one that’s promising:

tr.top td < border-top: thin solid black; >tr.bottom td < border-bottom: thin solid black; >tr.row td:first-child < border-left: thin solid black; >tr.row td:last-child

   
 
no border
 
no border here either
 
 
one
 
two
 
 
three
 
four
 
 
once again no borders
 
 
hello
 
 
world
 
 

If you set the border-collapse style to collapse on the parent table you should be able to style the tr : (styles are inline for demo)

 
 
No Border
 
 
Border
 
 
No Border
 
 
 

Setting HTML table borders to combine tables to appear to look like one table (JQuery)

Try to unborder middle table, not tr or td.

Also add negative margin to middle div

table#tbl1 < border-bottom:none; >table#tbl2 < border-top:none; border-bottom:none;>table#tbl3 < border-top:none; >#div2

 
  Head Row 1, cell 1 Head Row 1, cell 2 Head Row 1, cell 3  Head Row 2, cell 1 Head Row 2, cell 2 Head Row 2, cell 3    
 
  Row 1, cell 1 Row 1, cell 2 Row 1, cell 3  Row 1, cell 1 Row 1, cell 2 Row 1, cell 3    
 
  Foot Row 1, cell 1 Foot Row 1, cell 2 Foot Row 1, cell 3  Foot Row 2, cell 1 Foot Row 2, cell 2 Foot Row 2, cell 3    

You can use border-collapse to merge the borders, then using the :not selector, choose all tables except the one in the last DIV, to remove their bottom borders (in css, not js):

table < border-collapse: collapse; >div:not(:last-child) table

Applying borders to a single table cell when using border-collapse, I want certain cells to have a red border, instead. td.special < border: 2px solid Red; >. This doesn’t work as

Источник