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
- Show / Hide div based on dropdown selected using jQuery
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Slick Slider Basic With Example
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- Image Lazy loading Using Slick Slider
- Calculate Subtotal On Quantity Increment in Woocommerce Single Product Page
- Slick Slider Multiple Items With Example
Total Views: 177
Share