Las tablas HTML predeterminadas se ven bastante decepcionantes: utilícelas con algunos efectos CSS atractivos.

Agregar una tabla a su sitio web es una forma útil de presentar grandes cantidades de información con claridad. Las tablas también proporcionan un uso eficiente del espacio y le permiten leer y comparar datos complejos más fácilmente.

Puedes diseñar tablas para que sean más atractivas visualmente usando CSS. Si lo hace, también puede mejorar la experiencia general del usuario de su sitio web.

Diseño moderno de filas y columnas individuales

Puede agregar un diseño de tabla simple con filas y columnas individuales y sin celdas combinadas. Diseñar la tabla también asegura que su página web sea atractiva para el usuario. Aparte del estilo de la mesa, hay otros geniales efectos HTML y Diseños de sitios web de visualización CSS puede agregar a su sitio web.

Puede ver el código de este ejercicio en su repositorio de GitHub.

  1. En un nuevo archivo HTML, agregue la estructura básica del código HTML:
    html>
    <html>
    <cabeza>
    <título>Mi mesa sencillatítulo>
    cabeza>
    <cuerpo>

    cuerpo>
    html>
    2. instagram viewer
  2. Dentro del cuerpo, agregue etiquetas de tabla:
    <mesa>

    mesa>
  3. El elemento de la tabla HTML debe contener fila de la tabla etiquetas para cada fila dentro de la tabla. La fila superior se usa comúnmente para encabezados. Usar encabezado de tabla Etiquetas HTML para representar cada columna en la tabla:
    <tr>
    <el>Encabezado 1el>
    <el>Encabezado 2el>
    <el>Encabezado 3el>
    tr>
  4. Agregue más filas debajo de la fila del encabezado. Usar datos de la tabla Etiquetas HTML para agregar datos en cada celda de la tabla:
    <tr>
    <td>Fila 1, Columna 1td>
    <td>Fila 1, Columna 2td>
    <td>Fila 1, Columna 3td>
    tr>
    <tr>
    <td>Fila 2, Columna 1td>
    <td>Fila 2, Columna 2td>
    <td>Fila 2, Columna 3td>
    tr>
    <tr>
    <td>Fila 3, Columna 1td>
    <td>Fila 3, Columna 2td>
    <td>Fila 3, Columna 3td>
    tr>
    <tr>
    <td>Fila 4, Columna 1td>
    <td>Fila 4, Columna 2td>
    <td>Fila 4, Columna 3td>
    tr>
    <tr>
    <td>Fila 5, Columna 1td>
    <td>Fila 5, Columna 2td>
    <td>Fila 5, Columna 3td>
    tr>
  5. Agregue una etiqueta de estilo dentro de la etiqueta principal. Agregue un estilo general a la tabla, como sombras, esquinas redondeadas, fuentes y márgenes:
    <estilo>
    mesa {
    borde-colapso: colapsar;
    ancho: 100%;
    color: #333;
    Familia tipográfica: Arial, sans-serif;
    tamaño de fuente: 14píxeles;
    texto alineado: izquierda;
    borde-radio: 10píxeles;
    Desbordamiento: oculto;
    sombra de la caja: 0 0 20píxelesrgb(0, 0, 0, 0.1);
    margen: auto;
    margen superior: 50píxeles;
    margen inferior: 50píxeles;
     } 
    estilo>
  6. Dale estilo al encabezado de la tabla para darle un color de fondo y texto alineado:
    mesael {
    color de fondo: #ff9800;
    color: #fff;
    peso de fuente: atrevido;
    relleno: 10píxeles;
    transformación de texto: mayúscula;
    espaciado de letras: 1píxeles;
    borde superior: 1píxelessólido#fff;
    borde inferior: 1píxelessólido#ccc;
    }
  7. Diseñe las filas de la tabla para alternar entre los colores gris y blanco, y para agregar un efecto al pasar el mouse sobre la fila:
    mesatr:nésimo hijo (par)td {
    color de fondo: #f2f2f2;
    }
    mesatr:flotartd {
    color de fondo: #ffedcc;
    }
  8. Dale estilo a los datos dentro de las celdas de la tabla:
    mesatd {
    color de fondo: #fff;
    relleno: 10píxeles;
    borde inferior: 1píxelessólido#ccc;
    peso de fuente: atrevido;
    }
  9. Abra su archivo HTML para ver la tabla en un navegador web:

Diseño de mesa de celdas de líneas múltiples

Algunas tablas incluyen columnas con filas combinadas para formar una celda de varias líneas.

  1. Elimine todas las filas de la tabla actual, manteniendo solo la superior con los encabezados:
    <mesa>
    <tr>
    <el>Encabezado 1el>
    <el>Encabezado 2el>
    <el>Encabezado 3el>
    tr>
    mesa>
  2. Cree una celda de varias líneas utilizando el atributo de rango de filas. Esto expandirá esa celda a través del número especificado de filas.
     Sección 1 
    <tr>
    <tdfilas="2">Celda multilíneatd>
    <td>Fila 1, Columna 2td>
    <td>Fila 1, Columna 3td>
    tr>
    <tr>
    <td>Fila 2, Columna 2td>
    <td>Fila 2, Columna 3td>
    tr>
  3. Al agregar otra línea de varias celdas con un valor de longitud de fila diferente, agregue el número correspondiente de filas de la tabla Etiquetas HTML. Esto es para hacer coincidir la altura o el número de filas que abarca la celda. Por ejemplo, si una celda tiene un intervalo de filas de 3, deberá agregar tres filas a las otras columnas para alinear la tabla correctamente.
     Sección 2 
    <tr>
    <tdfilas="3">Celda multilíneatd>
    <td>Fila 3, Columna 2td>
    <td>Fila 3, Columna 3td>
    tr>
    <tr>
    <td>Fila 4, Columna 2td>
    <td>Fila 4, Columna 3td>
    tr>
    <tr>
    <td>Fila 5, Columna 2td>
    <td>Fila 5, Columna 3td>
    tr>
  4. Abra su archivo HTML para ver la tabla en un navegador web:

Diseño de tabla de fila combinada

Al igual que las celdas de líneas múltiples, las tablas también pueden tener filas que se fusionan en varias columnas.

  1. Elimine todas las filas de la tabla actual, manteniendo solo la superior con los encabezados:
    <mesa>
    <tr>
    <el>Encabezado 1el>
    <el>Encabezado 2el>
    <el>Encabezado 3el>
    tr>
    mesa>
  2. Agregue más filas de tabla a la tabla. Use el atributo colspan para fusionar una de las filas en 3 columnas:
     Sección 1 
    <tr>
    <tdestilo="color de fondo: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>Fila 2, Columna 1td>
    <td>Fila 2, Columna 2td>
    <td>Fila 2, Columna 3td>
    tr>
    <tr>
    <td>Fila 3, Columna 1td>
    <td>Fila 3, Columna 2td>
    <td>Fila 3, Columna 3td>
    tr>
    <tr>
    <td>Fila 4, Columna 1td>
    <td>Fila 4, Columna 2td>
    <td>Fila 4, Columna 3td>
    tr>
  3. Agregue otra fila combinada para separar las secciones de la tabla:
     Sección 2 
    <tr>
    <tdestilo="color de fondo: #ffedcc"colspan="3">Q2td>
    tr>
    <tr>
    <td>Fila 6, Columna 1td>
    <td>Fila 6, Columna 2td>
    <td>Fila 6, Columna 3td>
    tr>
    <tr>
    <td>Fila 7, Columna 1td>
    <td>Fila 7, Columna 2td>
    <td>Fila 7, Columna 3td>
    tr>
    <tr>
    <td>Fila 8, Columna 1td>
    <td>Fila 8, Columna 2td>
    <td>Fila 8, Columna 3td>
    tr>
  4. Abra su archivo HTML para ver la tabla en un navegador web:

Use tablas atractivas para aprovechar al máximo sus datos

Las tablas HTML son una excelente manera de mostrar datos estructurados en su sitio web. Puede diseñarlos con CSS para mejorar la apariencia predeterminada. Sin embargo, asegúrese de no dejarse llevar y usar tablas para el diseño; por razones de accesibilidad, consérvelas estrictamente para datos.

Las tablas más grandes pueden ser laboriosas de crear y actualizar, especialmente si utiliza columnas y filas que se extienden. Puede escribir su propio código para generar el marcado o aprovechar sintaxis más amigables como Markdown.