close

Tablas en HTML: una guía para crear y formatear tablas en HTML

Una tabla es un componente esencial en HTML para mostrar datos en un formato estructurado con filas y columnas. En HTML, las tablas se crean utilizando las etiquetas <table>, <tr> y <td>.

La etiqueta <table> representa el contenedor de la tabla principal, que contiene todas las filas y columnas. Las filas se definen con la etiqueta <tr>(fila de la tabla), mientras que las celdas dentro de las filas se definen con la etiqueta <td>(datos de la tabla). Además, puede usar la etiqueta <th>(encabezado de tabla) para definir celdas de encabezado para la tabla.

Puede usar atributos como colspan y rowspan para combinar celdas en la tabla o dividir celdas en varias filas y columnas. Además, puede aplicar propiedades CSS para personalizar la apariencia y el diseño de la tabla.

 

Tabla( <table>)

- El <table> elemento se utiliza para crear una tabla en HTML.

- Los datos se colocan en filas( <tr>) y columnas( <td> o <th>).

- Cada celda de datos se coloca dentro de elementos <td>(celda de datos) o <th>(celda de encabezado).

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>

 

Encabezado de columna( <th>)

- El <th> elemento se utiliza para crear encabezados de columna en una tabla.

- Suele colocarse en la primera fila de la tabla.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>

 

Filas de datos( <tr>):

- El <tr> elemento se utiliza para crear filas de datos en una tabla.

- Las celdas de datos( <td>) o las celdas de encabezado( <th>) se colocan dentro de estos <tr> elementos.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>

 

Expansión de columnas( colspan)

El colspan atributo se utiliza para determinar el número de columnas que ocupará una celda de datos o una celda de encabezado en la tabla.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>

 

Expansión de filas( rowspan)

El rowspan atributo se utiliza para determinar el número de filas que ocupará una celda de datos o una celda de encabezado en la tabla.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>

 

Combinar celdas( colspan y rowspan)

Puede combinar ambos colspan y rowspan atributos para fusionar celdas en una tabla.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>

 

border propiedad

- La border propiedad especifica el grosor del borde de la tabla.

- El valor de border es un número entero no negativo.

<table border="1">  
<!-- Table rows and columns -->  
</table>

 

cellpadding propiedad

- ,La cellpadding propiedad especifica la distancia entre el contenido de la celda y el borde de la celda en la tabla.

- El valor de cellpadding es un entero no negativo 

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>

 

cellspacing propiedad

- La cellspacing propiedad especifica el espacio entre las celdas de la tabla.

- El valor de cellspacing es un número entero no negativo.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>

 

Estos atributos y elementos le permiten crear y personalizar tablas en HTML según sus necesidades. Puede usarlos para mostrar datos de manera clara y organizada en su sitio web.