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.