Menu Close

How To Style Html Table Background Using CSS

Jennifer
Html background style

Here, we will see how to style the html table background using css. In css the background property is used to style the html table. Through this property, we can change the background color and background image of the html table. Also we can change the background image style of the table. Follow the below examples to create this.

Background color for html table:

In this example, we have changed the color of the table background through background color property.

<!DOCTYPE html>
<html>
<head>
    <title>Background color for html table</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html, body{
            padding: 10px;
            margin: 10px;
            text-align: center;
        }
        .table { 
            width: 100%;
            text-align: center;
            background-color: #F1C376;
            border-collapse: collapse;
        }
        .table td, .table th { 
            border:1px solid #fafafa;
            padding:18px;
        }
    </style>
</head>
<body>		
    <table class="table">
       <tr>
           <th>Name</th>
           <th>Email</th>
       </tr>
       <tr>
           <td>John Quil</td>
           <td>john@gmail.com</td>
       </tr>
       <tr>
           <td>Cherry Blossom</td>
           <td>cherry@gmail.com</td>
       </tr>
       <tr>
           <td>Perry Scope</td>
           <td>perry@gmail.com</td>
       </tr>
    </table> 
</body>
</html>

Background image for html table:

Here, we have changed the html background as an image via the background property. Also we have changed the style of the background image.

<!DOCTYPE html>
<html>
<head>
    <title>Background image for html table</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html, body{
            padding: 10px;
            margin: 10px;
            text-align: center;
        }
        .table { 
            width: 100%;
            text-align: center;
            background: url("c1.jpg") no-repeat;
            border-collapse: collapse;
            border:1px solid #333;
        }
        .table td, .table th { 
            padding:18px;
        }
    </style>
</head>
<body>		
    <table class="table">
       <tr>
           <th>Name</th>
           <th>Email</th>
       </tr>
       <tr>
           <td>John Quil</td>
           <td>john@gmail.com</td>
       </tr>
       <tr>
           <td>Cherry Blossom</td>
           <td>cherry@gmail.com</td>
       </tr>
       <tr>
           <td>Perry Scope</td>
           <td>perry@gmail.com</td>
       </tr>
    </table> 
</body>
</html>
Popular Posts
Total Views: 746
Posted in CSS, HTML, Web Technologies
Tagged , , , , , , , ,

You can also read...