¿Cómo poner el título debajo de la tabla usando CSS?

Para colocar el título debajo de la tabla, podemos usar la propiedad caption-side de CSS . Esta propiedad se utiliza para especificar la posición en la que se coloca el título de la tabla. Se utiliza en tablas HTML . 

Esta propiedad se puede usar con cualquier elemento cuya propiedad de visualización se establezca en caption-side . Hay varios parámetros para esta propiedad, pero se nos ha pedido que coloquemos el título debajo de la tabla, por lo que usaremos un único valor de parámetro que es bottom .

Sintaxis:

caption-side: bottom;

Ejemplo:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>caption-side property</title> 
        <style> 
            .geeks { 
                caption-side: bottom; 
            } 
        </style> 
    </head> 
    <body> 
        <center> 
            <h1 style="color:green;">GeeksForGeeks</h1> 
            <h2>caption-side: bottom:</h2> 
            <table class="geeks" border="1"> 
                <caption>Table 4.1 Student Details</caption> 
                <tr> 
                    <th>Student Name</th> 
                    <th>Enroll_no.</th> 
                    <th>Address</th> 
                </tr> 
                <tr> 
                    <td>Hritik Bhatnagar</td> 
                    <td>234</td> 
                    <td>Delhi</td> 
                </tr> 
                <tr> 
                    <td>Govind madan</td> 
                    <td>235</td> 
                    <td>kolkata</td> 
                </tr> 
                <tr> 
                    <td>Suraj Roy</td> 
                    <td>236</td> 
                    <td>Mumbai</td> 
                </tr> 
                <tr> 
                    <td> Dhruv Mishra</td> 
                    <td>237</td> 
                    <td>Dehadun</td> 
                </tr> 
            </table> 
        </center> 
    </body> 
</html>                     

Producción:

subtítulo

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *