programación

Crear Tablas HTML y CSS

Last Updated: 22/02/2024
3 minutos de lectura

Para crear un diseño de tabla elegante utilizando HTML y CSS, es importante entender cómo estructurar el código HTML para la tabla y luego aplicar estilos con CSS para mejorar su apariencia. Aquí te proporcionaré un ejemplo detallado de cómo lograrlo:

Publicaciones relacionadas

Paso 1: Estructura HTML de la tabla

Primero, necesitamos definir la estructura básica de la tabla utilizando etiquetas HTML

,

,

,

, y

o

para las celdas de encabezado y datos respectivamente.

html
<table>
  <thead>
    <tr>
      <th>Encabezado 1th>
      <th>Encabezado 2th>
      <th>Encabezado 3th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>Dato 1td>
      <td>Dato 2td>
      <td>Dato 3td>
    tr>
    
  tbody>
table>

Paso 2: Estilizar la tabla con CSS

Una vez que tenemos la estructura básica de la tabla, podemos aplicar estilos CSS para mejorar su apariencia y hacerla más elegante. Aquí hay un ejemplo de CSS que puedes utilizar:

css
/* Estilos generales de la tabla */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Estilos para las celdas del encabezado */
th {
  background-color: #f2f2f2; /* Color de fondo */
  border: 1px solid #dddddd; /* Borde */
  padding: 8px; /* Espaciado interno */
  text-align: left; /* Alineación del texto */
}

/* Estilos alternativos para las filas de la tabla */
tr:nth-child(even) {
  background-color: #f9f9f9; /* Color de fondo alternativo */
}

/* Estilos para las celdas de datos */
td {
  border: 1px solid #dddddd; /* Borde */
  padding: 8px; /* Espaciado interno */
  text-align: left; /* Alineación del texto */
}

/* Estilos al pasar el mouse sobre las filas */
tr:hover {
  background-color: #e2e2e2; /* Cambio de color al pasar el mouse */
}

Paso 3: Aplicar los estilos a tu tabla HTML

Simplemente incorpora los estilos CSS en tu documento HTML, ya sea mediante un elemento