html Table Border

 

       Border Cells

Border on empty cells

 In any table, A cell that does not contain any content is known as an empty cell. If you have empty cells in your table, then you can use the empty-cells property to specify whether or not their borders should be shown. Since browsers treat empty cells in different ways, if you want to explicitly show or hide borders on any empty cells then you should use this property.

Type 3 

1. Show:  This shows the border of any empty  cells.

2. hide: This hides the border of any empty cells

3. Inherit : if you have one table nested inside another 

Border on empty cells Example 

<html>

<head>

<style>

td { border: 1px solid #0088dd; 

padding:15px;}

table.one { empty-cells: show; } 

table.two { empty-cells: hide; }

</style>

 </head>

<body>

<h2> empty-cells: show property</h2> <table class="one">

<tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td></td> </tr>

</table> <br> <h2> empty-cells:hide property</h2>

<table class="two"> <tr> <td>1</td><td>2</td> </tr>

 <tr><td>3</td><td></td> </tr>

 <table>  </body>

</html>

Border on empty cells output

Border-spacing & border-collapse

The border spacing property allows you to control the distance between adjacent cells. By defaul browsers often leave a small gap between each table cell, so if you want to increase or decrease this space then the border spacing property allows you to control the gap. The value of this property is usually specifted in pixels. You can specify two values if desired to specify separate numbers for horontal and vertical spacing.

Border-spacing property:

a)length:- It specifies the horizontal and vertical spacing between borders. If two length values are provided to this property, the first value sets the horizontal spacing and the second value sets the vertical spacing.

b)inherit:-It specifies that the value of the border-spacing property should be inherited from the parent element.

 syntax 

border-spacing: 15px 50px;

In the above syntax, the border-spacing property takes two values, 15pixles and 50pixles. The first value specifies the horizontal spacing and the second value specifies the vertical spacing.

When a border has been used on table cells, where two cells meet, the width of lines would be twice that of the outside edges. It is possible to collapse adjacent borders to prevent this using the border- collapse property.

Possible values

Collapse: We use border-collapse property to create a collapsed border in HTML. The border-collapse is a CSS property used to set the table borders should collapse into a single border or be separated with its own border in HTML. it sets a common border to all the cells of a table.

Separate: The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table> . This property applies only when border-collapse is separate. It sets the separate border for each cell of a table.

Inherit: it inherits the value of the border-collapse property from the parent element.

The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property. 

Syntax: 

 table {border-collapse: separate;

}

Border-spacing & border-collapse Example 

<html> <head>

<style>

td {

background-color: pink; 

padding: 15px; border: 2px solid #000000;

} 

table.one { border-spacing: 5px 5px; } table.two { border-collapse: collapse; }

</Style>

</head>

<body>

<h2> border-spacing: 5px 5px;</h2>

 <table class="one">

<tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr>

 </table>

<h2> border-collapse: collapse: </h2> 

<table class="two">

<tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr>

 </table>

</body>

 </html>

Border-spacing & border-collapse output 

Table Layout property

The table layout property is used to specify how a table should appear in a web browser. In CSS, the table-layout property allows flexibility in positioning the tables, which means that you can easily move and place tables at different locations throughout the Web page. Using the table-layout property also decreases the loading time of the table, allowing the main content to appear before the graphics. 

Auto: It refers to the layout in which a web browser automatically resizes a table according to its content. This is the default value of the table layout property.

Fixed: It refers to the layout in which a web browser reads only the first row of a table to determine the final layout of the table. It depends on the table width the width of the columns and border or cell spacing.

Syntax

Table {table-layout: auto;}

Table Layout property Example 

<!Doctype html>

<html><head>

<Style>

table { border-collapse: collapse;

 border:1px solid black;}

th, td {border-:1px solid black;}

table.a {table- layout: auto; width:180px;}

</Style></head><body>

 <h3>The table-layout & caption side Property</h3> 

<table class="a" id="example1">

<caption> Student Details</caption> <tr><th>Student ID</th>

<th>Student Name</th>

<th>Course</th></tr>

<tr><td>101</td>

<td>Amit</td>

<td>MCA</td></tr>

<tr><td>102</td>

<td>Sumit</td>

<td>BCA</td></tr>

</Body></html>

Table Layout property output 

 Related post 

split a background into 2 color

how to apply image tag in html

html block and inline element