Curso HTML

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas. Las tablas se crean usando las etiquetas <table> y </table>. En ella se incluyen doa etiquetas importantes: <tr>, que es para crear filas de tablas y <td>, para crear celdas de datos.

Cabe mencionar que para que la tabla tenga un aspecto más agradable, es importante utilizar una hoja de estilo pero en este curso, estaremos aplicando lo básico de CSS.

Para empezar, tenemos que colocar la etiqueta <table> para tener la tabla y dentro de la etiqueta, colocaremos lo siguiente:

<td>Celda1</td>

<td>Celda2</td>

Y como resultado tendríamos:

Celda

Ahora bien, para colocar encabezados a la tabla se necesita abrir una nueva etiqueta denominada <thead> dentro de la etiqueta <table>.
Posteriormente, dentro de la etiqueta <thead>, se colocará la etiqueta <th>.

<thead>

<tr>

<th>Encabezado1</th>
<th>Encabezado2</th>

</tr>

<thead>

La tabla que obtendríamos, se vería de la siguente forma

Encabezado1	Encabezado2

Ahora, para añadir otras celdas por debajo de los encabezados, necesitamos lo siguiente:

<thead>

<tr>

<th>Encabezado1</th>
<th>Encabezado2</th>

</tr>

<thead>
<tbody>

<tr>

<td>Fila1Celda1</td>
<td>FilaCelda2</td>

</tr>
<tr>

<td>Fila2Celda1</td>
<td>Fila2Celda2</td>

</tr>

</tbody>

La tabla que obtendriamos, seria la siguiente:

Encabezado1	Encabezado2
Fila1Celda1	Fila1Celda2
Fila2Celda1	Fila2Celda2

Para que le puedas dar estilo anterior a tu tabla, usa lo siguiente:

        table {    
            border-collapse: collapse; 
            width: 50%;
            margin-left: 12%;
        }
                   
        th, td {  
            border: 1px solid black; 
            padding: 8px;
            text-align: left;
        }
                   
        th {  
            background-color: #ffff57; 
            text-align: center;
        }

TABLAS