W3.CSS proporciona una serie de clases que se pueden usar para aplicar varios estilos a las tablas, como cambiar la apariencia del encabezado, eliminar las filas, agregar o eliminar bordes, hacer que las filas se puedan desplazar, etc. W3.CSS también proporciona clases para crear tablas receptivas.
Tabla simple: la clase .w3-table se usa para crear una tabla W3.CSS simple. Este nombre de clase se usa con la etiqueta <table> para crear una tabla.
Sintaxis:
<table class="w3-table"> Table Contents... <table>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Adding a table at the center of the page --> <div class="w3-container w3-center"> <table class="w3-table"> <!-- Table Heading --> <thead> <tr> <th>Sr. No.</th> <th>Name</th> <th>City</th> <th>Age</th> </tr> </thead> <!-- Table Body or Content --> <tbody> <tr> <th>1</th> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr> <th>2</th> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr> <th>3</th> <td>Parush</td> <td>Kolkata</td> <td>22</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Filas despojadas : la clase .w3 -stripped se usa para crear filas oscuras y claras alternativas. Utilice la combinación de clases table, w3-table y w3-stripped dentro de la etiqueta <table> para crear una tabla stripped.
Sintaxis:
<table class="w3-table w3-stripped"> Table Contents... <table>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Title of the page --> <title>GeeksForGeeks</title> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Adding a table at the center of the page --> <div class="w3-container w3-center"> <table class="w3-table w3-stripped"> <!-- Table Headings --> <tr> <th>Sr. No.</th> <th>Name</th> <th>City</th> <th>Age</th> </tr> <!-- Table Content --> <tr> <th>1</th> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr> <th>2</th> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr> <th>3</th> <td>Parush</td> <td>Kolkata</td> <td>22</td> </tr> </table> </div> </body> </html>
Producción:
Tabla bordeada: el borde .w3 se usa para agregar un borde a lo largo de la tabla. El borde solo ocurre alrededor de la mesa y no en la mesa. Para ver este efecto, use .w3-border junto con .w3-table en la etiqueta de la tabla.
Sintaxis:
<table class="w3-table w3-border"> Table Contents... <table>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Title of the page --> <title>GeeksForGeeks</title> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2> </div> <!-- Adding a table at the center of the page --> <div class="w3-container w3-center"> <table class="w3-table w3-border"> <!-- Table Headings --> <tr> <th>Sr. No.</th> <th>Name</th> <th>City</th> <th>Age</th> </tr> <!-- Table Content --> <tr> <th>1</th> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr> <th>2</th> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr> <th>3</th> <td>Parush</td> <td>Kolkata</td> <td>22</td> </tr> </table> </div> </body> </html>
Producción:
Si queremos una tabla completamente bordeada, debemos usar la clase .w3-bordered junto con .w3-border y w3-table dentro de la etiqueta de la tabla.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Adding a table at the center of the page --> <div class="w3-container w3-center"> <table class="w3-table w3-border w3-bordered"> <!-- Table Headings --> <tr> <th>Sr. No.</th> <th>Name</th> <th>City</th> <th>Age</th> </tr> <!-- Table Content --> <tr> <th>1</th> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr> <th>2</th> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr> <th>3</th> <td>Parush</td> <td>Kolkata</td> <td>22</td> </tr> </table> </div> </body> </html>
Producción:
Tabla que se puede desplazar: la clase .w3-hoverable se usa para agregar un efecto de desplazamiento (cambiar el color de fondo a gris cuando se mueve el mouse) en las filas de la tabla. Utilice la combinación de clases w3-table y w3-hoverable dentro de la etiqueta <table> para crear una tabla de filas flotantes.
Sintaxis:
<table class="w3-table w3-hoverable"> Table Contents... <table>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Title of the page --> <title>GeeksForGeeks</title> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2> </div> <!-- Adding a table at the center of the page --> <div class="w3-container w3-center"> <table class="w3-table w3-hoverable"> <!-- Table Headings --> <tr> <th>Sr. No.</th> <th>Name</th> <th>City</th> <th>Age</th> </tr> <!-- Table Content --> <tr> <th>1</th> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr> <th>2</th> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr> <th>3</th> <td>Parush</td> <td>Kolkata</td> <td>22</td> </tr> </table> </div> </body> </html>
Producción:
Tabla de contenido centrado: la clase centrada en .w3 se utiliza para colocar todo el contenido de la tabla en el centro. Utilice la combinación de las clases w3-table y w3-centered dentro de la etiqueta <table> para crear este efecto.
Sintaxis:
<table class="w3-table w3-centered"> Table Contents... <table>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2> </div> <!-- Adding a table at the center of the page --> <div class="w3-container w3-center"> <table class="w3-table w3-centered"> <!-- Table Headings --> <tr> <th>Sr. No.</th> <th>Name</th> <th>City</th> <th>Age</th> </tr> <!-- Table Content --> <tr> <th>1</th> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr> <th>2</th> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr> <th>3</th> <td>Parush</td> <td>Kolkata</td> <td>22</td> </tr> </table> </div> </body> </html>
Producción:
Ahora, si desea seleccionar todos los efectos anteriores todos juntos en una tabla, puede usar la clase w3-table-all. Esta clase se usa para seleccionar todas las propiedades de la tabla, es decir, borde, despojado, tabla,… Debe usar esta clase con la etiqueta de la tabla para ver el efecto.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2> </div> <!-- Adding a table at the center of the page --> <div class="w3-container w3-center"> <table class="w3-table-all"> <!-- Table Headings --> <tr> <th>Sr. No.</th> <th>Name</th> <th>City</th> <th>Age</th> </tr> <!-- Table Content --> <tr> <th>1</th> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr> <th>2</th> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr> <th>3</th> <td>Parush</td> <td>Kolkata</td> <td>22</td> </tr> </table> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA