24-encabezados de tablas con html

Temas tratados en esta entrada

• Cabeceros de mesa HTML
• Cabeceros de mesa verticales
• Alinear encabezados de mesa
• Captación de mesa

---

Cabeceros de mesa HTML

Los encabezados de una tabla pueden alinearse usando las propiedades de CSS text-align para controlar la alineación horizontal y vertical-align para la alineación vertical de las celdas. Esto permite que los encabezados se presenten de una manera más organizada y clara.

Ejemplo

Nombre	Edad
Juan	25
Emilia	30

Código del ejemplo

    <table style="width: 100%; border: 1px solid #000; border-collapse: collapse;">
      <tr>
        <th style="border: 1px solid #000; text-align: left;">Nombre</th>
        <th style="border: 1px solid #000; text-align: center;">Edad</th>
      </tr>
      <tr>
        <td style="border: 1px solid #000;">Juan</td>
        <td style="border: 1px solid #000;">25</td>
      </tr>
      <tr>
        <td style="border: 1px solid #000;">Emilia</td>
        <td style="border: 1px solid #000;">30</td>
      </tr>
    </table>
                    

---

...

Encabezados Verticales

A continuación se presenta un horario escolar con encabezados horizontales y verticales.

Los cabeceros verticales en una tabla son aquellos encabezados que se colocan en la primera columna de una tabla, sirviendo como etiquetas para las filas. Generalmente, se utilizan para identificar o describir el contenido de las celdas en esa fila.

Por ejemplo, en un horario escolar, los cabeceros verticales pueden contener las horas del día, mientras que los cabeceros horizontales (que se colocan en la primera fila) pueden contener los días de la semana. Estos cabeceros ayudan a organizar y clarificar la información presentada en la tabla.

Ejemplo de Horario Escolar

Horario Escolar

Hora	Lunes	Martes	Miércoles	Jueves	Viernes
08:00 - 09:00	Matemáticas	Ciencias	Historia	Inglés	Educación Física
09:00 - 10:00	Literatura	Matemáticas	Ciencias	Arte	Geografía

Código del ejemplo

    <table style="width: 100%; border: 1px solid #000; border-collapse: collapse;">
      <caption style="font-weight: bold; font-size: 20px; margin-bottom: 10px;">Horario Escolar</caption>
      <tr>
        <th style="border: 1px solid #000; font-weight: bold;">Hora</th>
        <th style="border: 1px solid #000; font-weight: bold;">Lunes</th>
        <th style="border: 1px solid #000; font-weight: bold;">Martes</th>
        <th style="border: 1px solid #000; font-weight: bold;">Miércoles</th>
        <th style="border: 1px solid #000; font-weight: bold;">Jueves</th>
        <th style="border: 1px solid #000; font-weight: bold;">Viernes</th>
      </tr>
      <tr>
        <th style="border: 1px solid #000;">08:00 - 09:00</th>
        <td style="border: 1px solid #000;">Matemáticas</td>
        <td style="border: 1px solid #000;">Ciencias</td>
        <td style="border: 1px solid #000;">Historia</td>
        <td style="border: 1px solid #000;">Inglés</td>
        <td style="border: 1px solid #000;">Educación Física</td>
      </tr>
      <tr>
        <th style="border: 1px solid #000;">09:00 - 10:00</th>
        <td style="border: 1px solid #000;">Literatura</td>
        <td style="border: 1px solid #000;">Matemáticas</td>
        <td style="border: 1px solid #000;">Ciencias</td>
        <td style="border: 1px solid #000;">Arte</td>
        <td style="border: 1px solid #000;">Geografía</td>
      </tr>
    </table>
                    

---

Alinear encabezados de mesa

Para alinear los encabezados en una tabla, se pueden aplicar las propiedades de CSS mencionadas anteriormente.

Ejemplo de alineación a la derecha:

Ejemplo

Nombre	Edad
Juan	25
Emilia	30

Código del ejemplo

<table style="width: 100%; border: 1px solid #000; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #000; text-align: right;">Nombre</th>
    <th style="border: 1px solid #000; text-align: right;">Edad</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Juan</td>
    <td style="border: 1px solid #000;">25</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">Emilia</td>
    <td style="border: 1px solid #000;">30</td>
  </tr>
</table>
            

---

Captación de mesa

La captación de mesa se refiere a cómo se utilizan y presentan las tablas en un documento HTML, así como a cómo se estilizan mediante CSS para mejorar la legibilidad y la estética.

---

Ir al índice