La propiedad table-layout en CSS especifica el diseño de la tabla que consta de celdas, filas y columnas de la tabla.
Sintaxis:
table-layout: auto | fixed | initial | inherit;
Valor de propiedad: estas son las propiedades y su uso para un diseño de tabla.
- auto: el valor de propiedad auto se utiliza para crear un diseño de tabla automático en el navegador. Esta propiedad crea el ancho de columna por contenido irrompible en las celdas de la tabla.
- fixed: el valor de propiedad fixed se utiliza para crear un diseño de tabla fijo. Los anchos de la tabla y la columna se crean por los anchos de la tabla y la columna o por el ancho de la primera fila de celdas.
- initial: el valor de la propiedad se utiliza para crear su valor predeterminado.
- heredar: El valor de la propiedad para heredar la propiedad de su padre.
Ejemplo 1: En este ejemplo, diseño de tabla: se utiliza la propiedad automática en la que se crea un diseño de tabla automático en el navegador y esta propiedad crea el ancho de columna mediante contenido irrompible en las celdas de la tabla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>table-layout property</title>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
}
table#table1 {
table-layout: auto;
width: 200px;
}
div {
max-width:200px;
padding:10px;
border:10px solid black;
}
h1 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>table-layout property</h2>
<div>
<h3>table-layout:auto</h3>
<table id = "table1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Books</th>
</tr>
<tr>
<td>Rita Shrivastava</td>
<td>30</td>
<td>Good Days</td>
</tr>
<tr>
<td>Priya </td>
<td>18</td>
<td>Bad Days</td>
</tr>
</table>
</div>
<br>
</center>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, diseño de tabla: se usa la propiedad fija en la que se crea un diseño de tabla fijo y los anchos de tabla y columna se crean por los anchos de tabla y columna o por el ancho de la primera fila de celdas .
HTML
<!DOCTYPE html>
<html>
<head>
<title>table-layout property</title>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
}
table#table1 {
table-layout: fixed;
width: 200px;
}
div {
max-width:200px;
padding:10px;
border:10px solid black;
}
h1 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>table-layout property</h2>
<div>
<h3>table-layout:fixed</h3>
<table id = "table1">
<tr>
<th>Author Name</th>
<th>Age</th>
<th>Books</th>
</tr>
<tr>
<td>Rita Shrivastava</td>
<td>30</td>
<td>Good Days</td>
</tr>
<tr>
<td>Priya</td>
<td>18</td>
<td>Bad Days</td>
</tr>
</table>
</div>
</center>
</body>
</html>
Producción:
disposición de la mesa
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA