Table in CSS3

How to create different styles in the table using CSS?

Tables

Table is used to list tabular data on the web page. It can also be used to create page layout of the web page however this is not suggested. Page layout should be created using div element.

In order to create the table we need to create

tr -It specifies the row of table
th - It specifies the head of table
td - It creates the row
tbody - It creates the body of table
thead - It creates the head of the table

Table border

Border is an value used in the style tag to create the border by using border :2px solid green which creates the table border by the value 2px

  <p><i>Table border</i></p>
    <table border="1">
        <tr>
            <th>Dotnetfunda</th>
            <th>Techfunda</th>
            <th>Itfunda</th>
        </tr>
        <tr>
            <td>Forums</td>
            <td>Javascript</td>
            <td>Tutorials</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>AngularJS</td>
            <td>Offline training</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>Bootstrap</td>
            <td>online training</td>
        </tr>
    </table>

In the above code snippet we are creating borders to the table. In order to create the border

<table border="1" > - renders the table with border
<th>- renders the head of the body
<td> - renders the data of the table

output

Border-collapse property

Border collapse property collapse or removes the border, here the border collapse removes the border to the table by using border collapse

<style>
        table {
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h2>Border collapse</h2>
    <table>
        <tr>
            <th>AMERICA</th>
            <th>INDIA</th>
        </tr>
        <tr>
            <td>OBAMA</td>
            <td style="color:blue">DR.APJ ABDUL KALAM</td>
        </tr>
        <tr>
            <td>PRESIDENT</td>
            <td>FORMER PRESIDENT</td>
        </tr>
    </table>

Border collapse

In the above code snippet we have style sheet of the bordercollapse property to remove the border

output

Table height and width

Table width and height are used to create the height and width to the table, it increases and decreases the table height and width

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

        table {
            border-collapse: collapse;
            width: 50px;
        }

        th {
            height: 80px;
        }
    </style>
</head>
<body>

    <h2>Height and width</h2>
    <table>
        <tr>
            <th>PRESIDENT</th>
            <th>PRIME MINISTER</th>
            <th>CHEIF MINISTER</th>
        </tr>
        <tr>
            <td>Pranab Mukherjee</td>
            <td>NARENDRA MODI</td>
            <td>CHANDRA BABAU NAIDU</td>
        </tr>
        <tr>
            <td>DELHI</td>
            <td>DELHI</td>
            <td>ANDHRA PRADESH</td>
        </tr>
    </table>
</body>

Height and width

In the above code snippet we have table width and height properties, we have

<th> - height as 50px
<table> - Width as 50px defines the table to be 50px

output

Text align

Text align in the table is used to align the text in the table to move to the right, left and center of the table

 <style>
        table, td, th {
            border: 1px solid black;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th {
            height: 80%;
            text-align:center
        }
    </style>
</head>
<body>
    <h2>Text align</h2>
    <table>
        <tr>
            <th>PRESIDENT</th>
            <th>PRIME MINISTER</th>
            <th>CHEIF MINISTER</th>
        </tr>
        <tr>
            <td style="text-align:left">Pranab Mukherjee</td>
            <td style="text-align:center">NARENDRA MODI</td>
            <td style="text-align:right">CHANDRA BABAU NAIDU</td>
        </tr>
        <tr>
            <td style="text-align:center">DELHI</td>
            <td>DELHI</td>
            <td>ANDHRA PRADESH</td>
        </tr>
    </table>
</body>

Text align

In the above code snippet we have the text align property to define the table alignment

textalign - Left - It renders text to left
textalign - center - It renders text to center
textalign - right - It renders text to right

output

Table padding

Padding in the table creates the space to the word in the table from all sides of top, bottom, right and left sides of the table

<style>
        table, th, td {
            border: 1px solid silver;
        }

         td {
            padding: 15px;
        }
    </style>
    </head>
<body>
    <p>Table padding</p>
    <table>
        <tr>
            <th>Dotnetfunda</th>
            <th>Techfunda</th>
            <th>Itfunda</th>
        </tr>
        <tr>
            <td>Forums</td>
            <td>Javascript</td>
            <td>Tutorials</td>
        </tr>
        <tr>
            <td>Articles</td>
            <td>AngularJS</td>
            <td>Offline training</td>
        </tr>
        <tr>
            <td>Codes</td>
            <td>Bootstrap</td>
            <td>online training</td>
        </tr>
    </table>
</body>

Table padding

In the above code snippet we have defined table padding as we have given padding to td as padding 15px which appears as 15px space from four sides of the table .

output

Table with vertical alignment

Vertical alignment in the table is used to align the text to top, center, bottom of the table

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

        table {
            border-collapse: collapse;
            width: 50%;
        }

        td {
            height: 50px;
        }
    </style>
</head>
<body>
    <h2>Table with vertical alignment</h2>
    <table>
        <tr>
            <th>SNITFUNDA</th>
            <th>MICROSOFT</th>
            <th>GOOGLE</th>
        </tr>
        <tr>
            <td style="vertical-align:top">SHEO NARAYAN</td>
            <td style="vertical-align:bottom">SATHYA NADELLA</td>
            <td style="vertical-align:top">SUNDAR PICTHAI</td>
        </tr>
    </table>
</body>

Vertical alignment

In the above code snippet we have the vertical alignment property to align the text to top and bottom

output

Table hover

Hover creates the hovering effect in the table to change the color of the table when the mouse hover is placed on the table

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

        table {
            border-collapse: collapse;
            width: 50%;
        }
        td {
            height: 50px;
        }
        tr:hover{
            background-color:magenta;
        }
    </style>
</head>
<body>

    <h2>Table with Hover</h2>
    <table>
        <tr>
            <th>HYDERABAD</th>
            <th>RANGAREDDY</th>
            <th>HYDERABAD</th>
        </tr>
        <tr>
            <td style="vertical-align:top">STATE</td>
            <td style="vertical-align:bottom">DISTRICT</td>
            <td style="vertical-align:top">CITY</td>
        </tr>
        <tr>
            <td>HITECHCITY</td>
            <td>GOLCONDA</td>
            <td>CHARMINAR</td>
        </tr>
    </table>
</body>

Table hover

In the above code snippet we have the hover effect to the table, the hover is added to the tr element when the mouse is placed on the the element the background color appears to the tr element

output

Table stripped

Strippes in the table creates the alternate color to notify the style in the table

 <style>
        table {
           
            width: 50%;
        }

        th, td {
            text-align: center;
            padding: 2px;
        }
        tr:nth-child(odd) {
            background-color: silver;
            color:blue
        }
    </style>
</head>
<body>
    <h2>Striped Table</h2>
    <table>
        <tr>
            <th>JAVASCRIPT</th>
            <th>BOOTSTARP</th>
            <th>RESULT</th>
        </tr>
        <tr>
            <td>20</td>
            <td>30</td>
            <td>50</td>
        </tr>
        <tr>
            <td>10</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>2</td>
            <td>6</td>
            <td>8</td>
        </tr>
        <tr>
            <td>23</td>
            <td>25</td>
            <td>48</td>
        </tr>
    </table>
</body>

Table stripped

In the above code snippet we created thestripped table by using nth child as odd which starts form the odd numbers to strip the table

output

Table background color

Background color adds the color in the background of the table by using value background color:blue;

<style>
        table {
            border-collapse: collapse;
            width: 50%;
        }
        th, td {
            text-align: left;
            padding: 8px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr{
            background-color:red;
            color:pink;
        }
    </style>
</head>
<body>
<h2>Table with background color </h2>
   <table>
        <tr>
            <th>TECHFUNDA</th>
            <th>DOTNETFUNDA</th>
            <th>ITFUNDA</th>
        </tr>
        <tr>
            <td>Authors</td>
            <td>Moderators</td>
            <td>ADMIN</td>
        </tr>
    </table>
</body>

Table with background color

In the above code snippet we have defined the table with background color we have the th element with green color and tr element with the red color

output