MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

HTML Encabezados de tabla


Las tablas HTML pueden tener encabezados para cada columna o fila, o para muchas columnas/filas.


EMIL TOBIAS LINUS
     
     
     
     
     
8:00    
9:00    
10:00    
11:00    
12:00    
13:00    
MON TUE WED THU FRI
8:00          
9:00          
10:00          
11:00          
12:00          
DECEMBER
     
     
     
     
     

HTML Encabezados de tabla

Los encabezados de las tablas se definen con elementos th, cada elemento th representa una celda de la tabla.

Ejemplo

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Inténtalo tú mismo »

Encabezados de mesa verticales

Para usar la primera columna como encabezados de tabla, defina la primera celda de cada fila como un elemento th:

Ejemplo

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>
Inténtalo tú mismo »

Alinear encabezados de tabla

De forma predeterminada, los encabezados de las tablas están en negrita y centrados:

Nombre de pila Apellido Edad
Jill Smith 50
Eve Jackson 94

Para alinear a la izquierda los encabezados de la tabla, use la propiedad CSS text-align:

Ejemplo

th {
  text-align: left;
}
Inténtalo tú mismo »

Encabezado para varias columnas

Puede tener un encabezado que abarque dos o más columnas.

Nombre Edad
Jill Smith 50
Eve Jackson 94

Para hacer esto, use el atributo colspan en el elemento <th>:

Ejemplo

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Inténtalo tú mismo »

Aprenderá más sobre colspan y rowspan en el capítulo Tabla colspan y rowspan.


Título de la tabla

Puede agregar un título que sirva como encabezado para toda la tabla.

Ahorro mensual
Mes Ahorros
January $100
February $50

Para agregar un título a una tabla, use la etiqueta <caption>:

Ejemplo

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Inténtalo tú mismo »

Nota: La etiqueta <caption> debe insertarse inmediatamente después de la etiqueta <table>.


HTML Ejercicios

Ponte a prueba con ejercicios

Ejercicio:

Agregue un título de tabla que diga "Names".

<table>
  
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>



Comentarios