Una tabla en CSS se usa para aplicar las diversas propiedades de estilo a los elementos de la tabla HTML para organizar los datos en filas y columnas, o posiblemente en una estructura más compleja de una manera organizada correctamente. Las tablas se utilizan ampliamente en la comunicación, la investigación y el análisis de datos. La propiedad table-layout en CSS se puede utilizar para mostrar el diseño de la tabla. Esta propiedad se usa básicamente para establecer el algoritmo que se usa para diseñar celdas, filas y columnas de <tabla>.
Propiedades:
Borde : se utiliza para especificar bordes en la tabla.
Sintaxis:
border: table_width table_color;
Ejemplo 1: este ejemplo describe la tabla CSS para aplicar la propiedad de borde.
HTML
<!DOCTYPE html> <html> <head> <style> body { text-align: left; } h1 { color: green; } table, th, td { /* Styling the border. */ border: 1.5px solid blue; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>Add border to table:</h2> <table> <tr> <th>Roll No.</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> </body> </html>
Producción:
Border Collapse : la propiedad border-collapse nos dice si el navegador debe controlar la apariencia de los bordes adyacentes que se tocan entre sí o si cada celda debe mantener su estilo.
Sintaxis:
border-collapse: collapse/separate;
Ejemplo 2: este ejemplo describe la tabla CSS aplicando la propiedad border-collapse.
HTML
<!DOCTYPE html> <html> <head> <style> body { text-align: left; } h1 { color: green; } table.one { /* Styling border collapse for table one. */ border-collapse: collapse; } table.two { /* Styling border separate for table two. */ border-collapse: separate; } table, td, th { border: 1.5px solid blue; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>borders collapsed:</h2> <table class="one"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> <br> <br> <h2>borders separated:</h2> <table class="two"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> </body> </html>
Producción:
Espaciado de borde : esta propiedad especifica el espacio entre los bordes de las celdas adyacentes.
Sintaxis:
border-spacing: value;
Ejemplo 3: este ejemplo describe la tabla CSS aplicando la propiedad border-spacing.
HTML
<!DOCTYPE html> <html> <head> <style> body { text-align: left; } h1 { color: green; } table.one { border-collapse: separate; /* Styling the border-spacing between adjacent cells. */ border-spacing: 10px; } table.two { border-collapse: separate; /* Styling the border-spacing between adjacent cells. */ border-spacing: 10px 30px; } table, td, th { border: 1.5px solid blue; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>border spacing:</h2> <table class="one"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> <br> <br> <h2>border spacing:</h2> <table class="two"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> </body> </html>
Producción:
Lado del título : la propiedad del lado del título se utiliza para controlar la ubicación del título en la tabla. De forma predeterminada, los títulos se colocan encima de la tabla.
Sintaxis:
caption-side: top/bottom;
Ejemplo 4: este ejemplo describe la tabla CSS aplicando la propiedad caption-side para controlar la ubicación del título de la tabla.
HTML
<!DOCTYPE html> <html> <head> <style> body { text-align: left; } h1 { color: green; } table.one { border-collapse: separate; border-spacing: 10px; /* Controlling the placement of caption. */ caption-side: top; } table.two { border-collapse: separate; border-spacing: 10px; /* Controlling the placement of caption. */ caption-side: bottom; } table, td, th { border: 1.5px solid blue; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>Caption on top:</h2> <table class="one"> <caption>Caption at the top of the table.</caption> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> <br> <br> <h2>Caption at bottom:</h2> <table class="two"> <caption> Caption at the bottom of the table </caption> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> </body> </html>
Producción:
Celdas vacías : esta propiedad especifica si mostrar o no los bordes y el fondo en las celdas vacías de una tabla.
Sintaxis:
empty-cells:show/hide;
Ejemplo 5: este ejemplo describe la tabla CSS mediante la aplicación de la propiedad de celda vacía que especifica si mostrar los bordes o no en las celdas vacías de una tabla.
HTML
<!DOCTYPE html> <html> <head> <style> body { text-align: left; } h1 { color: green; } table.one { border-collapse: separate; border-spacing: 10px; /* Hiding empty cells border */ empty-cells: hide; } table.two { border-collapse: separate; border-spacing: 10px; /* Display empty cells border */ empty-cells: show; } table, td, th { border: 1.5px solid blue; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>empty cells hide:</h2> <table class="one"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td></td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> <br> <br> <h2>empty cells show:</h2> <table class="two"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td></td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> </body> </html>
Producción:
Diseño de tabla : la propiedad de diseño de tabla se utiliza para configurar el algoritmo de diseño utilizado para la tabla.
Sintaxis:
table-layout:auto/fixed;
Ejemplo 6: este ejemplo describe la tabla CSS aplicando la propiedad de diseño de tabla.
HTML
<!DOCTYPE html> <html> <head> <style> body { text-align: left; } h1 { color: green; } table.one { width: 80px border-collapse: separate; border-spacing: 10px; /* Layout of table is auto. */ table-layout: auto; } table.two { width: 80px border-collapse: separate; border-spacing: 10px; /* Layout of table is fixed. */ table-layout: fixed; } table, td, th { border: 1.5px solid blue; width: 80px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>auto table layout:</h2> <table class="one"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> <br> <br> <h2>fixed table layout:</h2> <table class="two"> <tr> <th>Roll Number</th> <th>Name</th> </tr> <tr> <td>1</td> <td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td> </tr> <tr> <td>2</td> <td>X_Y_Z</td> </tr> </table> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con Tables
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por apeksharustagi1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA