CSS - Tables

First Page
Next Page

CSS Tables

When you build an HTML table without any styles or attributes, browsers display them without any border. Styling a table with CSS can greatly improve its appearance.

The following sections will show you how to control the layout and presentation of the table elements using CSS to create elegant and consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the <table>, <th>, and <td> elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Sharma</td>
  </tr>
  <tr>
    <td>Rohit </td>
    <td>Sharma</td>
  </tr>
</table>
</body>
</html>

Result

If you've seen the output of the previous example, you've noticed every table cell has separate borders as well as there is some space between the borders of adjacent table cells. It happens because table cell borders are separated by default. But, you can collapse the separate table borders into one by using the CSS border-collapse property.

The border-collapse CSS property selects a table's border model.

It can accept one of the two values collapse or separate.

  • The separated model is the default HTML table border model in which each Adjacent cells have their own distinct borders.

  • In the collapsed border model, adjacent table cells share borders.

The style rules in the following example will collapse the table cell borders as well as apply the one pixel black border on the table and table cell elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Raj</td>
            <td>Sharma</td>
            <td>Rajsharma@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Rohit</td>
            <td>Sharma</td>
            <td>Rohitsharma@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Armaan</td>
            <td>Malik</td>
            <td>Armaanmalik@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Virat</td>
            <td>Kohli</td>
            <td>Viratkohli@mail.com</td>
        </tr>
    </table>
</body>
</html>

Result

You can also remove the space between the table cell borders through setting the value of border-spacing property to 0. However, it only removes the space but do not merge the borders like when you set the border-collapse to collapse.

CSS Table Border Collapse

By the help of border-collapse property, we can collapse all borders in one border only.

Example

<!DOCTYPE>
<html>  
<head>
<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
</style>  
</head>
<body>  
<table>  
<tr><th>First_Name</th> <th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Raj</td><td>Sharma</td><td>80</td></tr>  
<tr><td>Rohit</td><td>Verma</td><td>70</td></tr>  
<tr><td>Virat</td><td>Kohli</td><td>60</td></tr>  
<tr><td>Suresh</td><td>Raina</td><td>55</td></tr>  
</table>  
</body>
</html>

Result

First Page
Next Page