Tablas CSS
CSS Tutorial » Tablas CSS
Las tablas se utilizan normalmente para mostrar datos tabulares, como informes financieros.
Pero cuando crea una tabla HTML sin estilos ni atributos, los navegadores la muestran sin ningún borde. Con CSS puedes mejorar enormemente la apariencia de tus tablas.
CSS proporciona varias propiedades que le permiten controlar el diseño y la presentación de los elementos de la tabla. En la siguiente sección, verá cómo usar CSS para crear tablas elegantes y consistentes.
| ID | Nombre | Apellido | |
|---|---|---|---|
| 1 | Clark | Kent | clarkkent@mail.com |
| 2 | John | Carter | johncarter@mail.com |
| 3 | Peter | Parker | peterparker@mail.com |
Agregar bordes a tablas
La propiedad de borde CSS es la mejor manera de definir los bordes de las tablas.
El siguiente ejemplo establecerá un borde negro para los elementos <table>, <th> y <td>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de configuración de bordes de tabla</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Carter</td>
<td>mariacarter@yahoo.com</td>
</tr>
<tr>
<td>2</td>
<td>Petro</td>
<td>Parker</td>
<td>petroparker@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Iony</td>
<td>Rambo</td>
<td>ionyrambo@gmail.com</td>
</tr>
<tr>
<td>4</td>
<td>Harryson</td>
<td>Potter</td>
<td>harrysonpotter@mail.com</td>
</tr>
</table>
</body>
</html>
Contraer bordes de tabla
Hay dos modelos distintos para establecer bordes en las celdas de una tabla en CSS: separar y contraer.
En el modelo de borde separado, que es el predeterminado, cada celda de la tabla tiene sus propios bordes distintos, mientras que en el modelo de borde contraído, las celdas de la tabla adyacentes comparten un borde común. Puede establecer el modelo de borde para una tabla HTML mediante la propiedad de colapso de borde de CSS.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de fusión de bordes de tabla separados</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #039;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Carter</td>
<td>mariacarter@yahoo.com</td>
</tr>
<tr>
<td>2</td>
<td>Petro</td>
<td>Parker</td>
<td>petroparker@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Iony</td>
<td>Rambo</td>
<td>ionyrambo@gmail.com</td>
</tr>
<tr>
<td>4</td>
<td>Harryson</td>
<td>Potter</td>
<td>harrysonpotter@mail.com</td>
</tr>
</table>
</body>
</html>
Etiquetas: Tablas CSS ejemplos, bonitas, responsive, plantillas, y html, disenos, estilos, tablas css diseños, elegantes,
Configuración del ancho y la altura de la mesa
De forma predeterminada, una tabla se representará lo suficientemente ancha y alta para contener todo su contenido.
Sin embargo, también puede establecer el ancho y el alto de la tabla, así como sus celdas, utilizando explícitamente la propiedad CSS de ancho y alto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo de configuración de la anchura y la altura de la mesa</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #dee2e6;
}
th {
height: 40px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Carter</td>
<td>mariacarter@yahoo.com</td>
</tr>
<tr>
<td>2</td>
<td>Petro</td>
<td>Parker</td>
<td>petroparker@yahoo.com</td>
</tr>
<tr>
<td>3</td>
<td>Iony</td>
<td>Rambo</td>
<td>ionyrambo@gmail.com</td>
</tr>
<tr>
<td>4</td>
<td>Harryson</td>
<td>Potter</td>
<td>harrysonpotter@mail.com</td>
</tr>
</table>
</body>
</html>
Tablas CSS ejemplos, bonitas, responsive, plantillas, y html, disenos, estilos, tablas css diseños, elegantes,
Tablas CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.