W3.CSS Tables
1. Create Colored Table
To create a table with alternating colored rows, use the w3-striped class along with w3-border for borders.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<table class="w3-table w3-striped w3-border">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Mary Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Linda Johnson</td>
<td>22</td>
<td>Paris</td>
</tr>
</table>
</body>
</html>
2. Create Hoverable Tables
To create a hoverable table where rows change when you hover over them, use the w3-hoverable class.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<table class="w3-table w3-hoverable">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Mary Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Linda Johnson</td>
<td>22</td>
<td>Paris</td>
</tr>
</table>
</body>
</html>
3. Create Tables as Card
To style your table as a card, use the w3-card class along with the w3-table class.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-card-4 w3-margin">
<table class="w3-table">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Mary Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Linda Johnson</td>
<td>22</td>
<td>Paris</td>
</tr>
</table>
</div>
</body>
</html>
4. Create Responsive Table
For making a table responsive on smaller screens, use the w3-responsive class.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-responsive">
<table class="w3-table w3-bordered">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Mary Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Linda Johnson</td>
<td>22</td>
<td>Paris</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Images: A Complete Guide
In this post, we will explore various ways to style images using W3.CSS. From adding rounded corners to applying hover effects, these simple classes can transform the appearance of images on your website.
1. Rounded Image
You can use the w3-round class to add rounded corners to your images.
<img src="image.jpg" class="w3-round" style="width:150px">Explanation: This class adds rounded corners to the image, making it look smoother and more polished.
2. Circle Image
To make your image circular, you can use the w3-circle class. This is perfect for profile pictures or icons.
<img src="image.jpg" class="w3-circle" style="width:150px">Explanation: The w3-circle class gives the image a circular shape by setting its border radius to 50%.
3. Bordered Image
The w3-border class adds a border around your image, which can help it stand out on the page.
<img src="image.jpg" class="w3-border" style="width:150px">Explanation: Use the w3-border class to create a simple border around your image for a more defined and structured look.
4. Image as Card
You can make your image look like a card by adding a subtle shadow using the w3-card-4 class.
<img src="image.jpg" class="w3-card-4" style="width:150px">Explanation: The w3-card-4 class adds a shadow and a rounded border, giving the image a “card-like” appearance.
5. Image Text
If you want to add overlay text on top of an image, you can wrap the image and text in a container.
<div class="w3-container">
<img src="image.jpg" style="width:100%">
<div class="w3-center w3-text-white w3-padding-16">Image Text</div>
</div>Explanation: This approach places text over the image using a container. You can use classes like w3-center for alignment and w3-text-white for text color.
6. Responsive Image
For responsive design, the w3-image class ensures your image adjusts according to screen size.
<img src="image.jpg" class="w3-image" style="width:100%">Explanation: The w3-image class makes the image responsive, meaning it will scale according to the width of its container.
7. Image Opacity
You can control the opacity of the image using CSS, making it more transparent or opaque.
<img src="image.jpg" style="opacity:0.5; width:150px">Explanation: In this example, opacity:0.5 makes the image semi-transparent. You can adjust the opacity value (from 0 to 1) based on your preference.
8. Grayscale Image
The w3-grayscale class can be used to convert your image to grayscale, giving it a black-and-white appearance.
<img src="image.jpg" class="w3-grayscale" style="width:150px">Explanation: This class removes the color from the image, giving it a grayscale effect.
9. Sepia Image Effect
For a vintage or old-school look, the w3-sepia class applies a sepia tone to your image.
<img src="image.jpg" class="w3-sepia" style="width:150px">Explanation: The w3-sepia class applies a warm, brownish tint to the image, resembling a sepia photograph.
10. Hover Effect
To make your images more interactive, you can add hover effects. The w3-hover-shadow class adds a shadow to the image when the user hovers over it.
<img src="image.jpg" class="w3-hover-shadow" style="width:150px">Explanation: The w3-hover-shadow class creates a subtle shadow effect when the user hovers over the image, enhancing its interactivity.
11. Opacity Off
If you’ve applied opacity to an image and want to revert it to its original state, simply set opacity:1.
<img src="image.jpg" style="opacity:1; width:150px">Explanation: The opacity:1 rule sets the image to fully opaque, making it fully visible without any transparency.
Conclusion
W3.CSS offers a variety of simple and effective classes for styling images. Whether you want to add borders, create hover effects, or make your images responsive, these classes can help you achieve a professional look for your website.
By using these image styling techniques, you can create dynamic and visually appealing designs without much effort. Try out these classes and experiment with different combinations to enhance your website’s images.