How Do You Create a Table In Css

Posted By Bajarangi soft , Posted On 30-09-2020

The look of an HTML table can be greatly improved with CSS,To specify table borders in CSS, use the border property,Width and height of a table are defined by the width and height properties,e text-align property sets the horizontal alignment (like left, right, or center) of the content in 'th' or 'td',The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in 'th' or 'td',To control the space between the border and the content in a table, use the padding property on 'td' and 'th' elements:

1.Create a Table Using Css

<!DOCTYPE html>
<html>
<head>
    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
 border: 1px solid black;
        }

        #customers td, #customers th {
            border: 1px solid #ddd;
            padding: 8px;
 border: 1px solid black;
        }

        #customers tr:nth-child(even){background-color: #f2f2f2;}

        #customers tr:hover {background-color: #ddd;}

        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;
 border: 1px solid black;
            
        }
    </style>
</head>
<body>

<table id="customers">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Berglunds snabbköp</td>
        <td>Christina Berglund</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Königlich Essen</td>
        <td>Philip Cramer</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
    <tr>
        <td>North/South</td>
        <td>Simon Crowther</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Paris spécialités</td>
        <td>Marie Bertrand</td>
        <td>France</td>
    </tr>
</table>

</body>
</html>

2. Another way To Create a Table Using Css

<!DOCTYPE html>
<html>
<head>
    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            border: 1px solid black;
            text-align: left;
            
        }

        #customers td, #customers th {
            padding: 8px;
            border: 1px solid black;
            text-align: left;
        }

        #customers tr:nth-child(even){background-color: #f2f2f2;}

        #customers tr:hover {background-color: #ddd;}

        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;
            border: 1px solid black;
            text-align: left;
        }
    </style>
</head>
<body>

<table id="customers">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Berglunds snabbköp</td>
        <td>Christina Berglund</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Königlich Essen</td>
        <td>Philip Cramer</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
    <tr>
        <td>North/South</td>
        <td>Simon Crowther</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Paris spécialités</td>
        <td>Marie Bertrand</td>
        <td>France</td>
    </tr>
</table>

</body>
</html>

Related Post

How To Use SQL CREATE TABLE STATEMENT With Example In PHP
How to Create Jquery Datatable With Jquery Using PHP
How To Create Table Using Command WIth Example In Laravel
How To Check Table Is Exists Or Not In Database Using Laravel
How Can I Rollback Specified Tables In Laravel With An Example
How To Add New Columns For Existing Table In Laravel Framework
How To Modify The Columns In Existing Table With Laravel
How To Drop Columns From Existing Table In Laravel Framework
How Can I Add An Index To An Existing Table Columns In Laravel
How To Delete Data From Existing Table Using Model In Laravel
How Do You Create a Tables In Html Code
How Do You Create a Table In Css