1. Home
  2. Css
  3. CSS Tables

 CSS Tables CSS

CSS Tables  


CSS Tables

Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td> elements:

Firstname Lastname
Deepak Kumar
Meenakshi Nirman

 

Example

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

Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

 

Example

table {
  border-collapse: collapse;
}

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

Table Width and Height

Width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:

Firstname Lastname Savings
Deepak Chahar $100
Meenakshi Nirman $150

 

Example

table {
  width: 100%;
}

th {
  height: 50px;
}

Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

Example

th, td {
  padding: 15px;
  text-align: left;
}

Horizontal Dividers

Add the border-bottom property to <th> and <td> for horizontal dividers:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Deepak</td>
    <td>Chahar</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Meenakshi</td>
    <td>Nirman</td>
    <td>$150</td>
  </tr>
</table>

</body>
</html>

Download free E-book of CSS

#askProgrammers
Learn Programming for Free

Join Programmers Community on Telegram

Talk with Experienced Programmers

Just drop a message, we will solve your queries