AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

Tablas CSS


Next Page >>
HTML images

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 Email
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>.

Ejemplo
<!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.

Ejemplo
<!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>
Nota:  También puede eliminar el espacio entre los bordes de las celdas de la tabla estableciendo el valor de la propiedad CSS border-spacing en 0. Sin embargo, solo elimina el espacio, pero no fusiona los bordes como cuando establece el colapso del borde para que se contraiga.

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.

Ejemplo
<!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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.