Tablas (HTML)

TABLAS HTML

CODIGOS BÁSICOS PARA CREAR Y/O EDITAR TABLAS EN HTML
ESTRUCTURA BASÍCA
FUNCIÓN	ESTRUCTURA	RESULTADO
Estructura básica para la creación de una tabla.	<table border="1"> <tr> <td>Ejemplo</td> <td>Ejemplo</td> </tr> <tr> <td>Ejemplo</td> <td>Ejemplo</td> </tr> </table>	Ejemplo Ejemplo Ejemplo Ejemplo
ELEMENTOS DE LA TABLA
FUNCIÓN	ESTRUCTURA	RESULTADO
(<tr>, </tr>) Filas Cada <tr>, </tr> es una fila. Para agregar mas filas se añaden más códigos <tr>, </tr>. Para hacer útil este comando es necesario usar como mínimo un código <td>, </td> entre los códigos <tr> y </tr>.	<tr>, </tr> Ejemplo: <table border="1"> <tr> <td>Fila 1</td> <td>Fila 1</td> </tr> <tr> <td>Fila 2</td> <td>Fila 2</td> </tr> </table>	Fila 1 Fila 1 Fila 2 Fila 2
(<td>, </td>) Celdas El comando <td>, </td> es una celda, en la cual van datos situados entre los comandos <td> y </td>. Esta celda ó celdas van dentro de una fila, por esta razón este comando debe estar situado entre los comandos <tr> y </tr>.	<td>, </td> Ejemplo: <table border="1"> <tr> <td>Celda 1, Fila 1</td> <td>Celda 2, Fila 1</td> </tr> <tr> <td>Celda 1, Fila 2</td> <td>Celda 2, Fila 2</td> </tr> </table>	Celda 1, Fila 1 Celda 2, Fila 1 Celda 1, Fila 2 Celda 2, Fila 2
(colspan="") Colspan Unificación de celdas horizontalmente Este comando se encarga de unificar dos ó más celdas de una misma fila, es decir horizontalmente ó hacia la derecha. Para que funcione este comando debe ser ubicado seguido de un espacio después del <td y al final de este comando se ubica un >. Para determinar el número de celdas que se quiere unificar se pone ese número de celdas entre las dos comillas.	colspan="" Ejemplo: <table border="1"> <tr> <td colspan="2"> Celda 1, Fila 1 + Celda 2, Fila 1</td> <td>Celda 3, Fila 1</td> </tr> <tr> <td>Celda 1, Fila 2</td> <td>Celda 2, Fila 2</td> <td>Celda 3, Fila 2</td> </tr> <tr> <td>Celda 1, Fila 3</td> <td>Celda 2, Fila 3</td> <td>Celda 3, Fila 3</td> </tr> </table>	Celda 1, Fila 1 + Celda 2, Fila 1 Celda 3, Fila 1 Celda 1, Fila 2 Celda 2, Fila 2 Celda 3, Fila 2 Celda 1, Fila 3 Celda 2, Fila 3 Celda 3, Fila 3
(rowspan="") Rowspan Unificación de celdas verticalmente Este comando se encarga de unificar dos ó más celdas de una misma columna, es decir de forma vertical ó hacia abajo. Para hacer útil a este comando se debe ubicar seguido de un espacio después del <td y al final de este comando se ubica un >. Para determinar el número de celdas que se quiere unificar se pone ese número de celdas entre las dos comillas.	rowspan="" Ejemplo: <table border="1"> <tr> <td rowspan="2"> Celda 1, Fila 1 + Celda 1, Fila 2 </td> <td>Celda 2, Fila 1</td> <td>Celda 3, Fila 1</td> </tr> <tr> <td>Celda 2, Fila 2</td> <td>Celda 3, Fila 2</td> </tr> <tr> <td>Celda 1, Fila 3</td> <td>Celda 2, Fila 3</td> <td>Celda 3, Fila 3</td> </tr> </table>	Celda 1, Fila 1 + Celda 1, Fila 2 Celda 2, Fila 1 Celda 3, Fila 1 Celda 2, Fila 2 Celda 3, Fila 2 Celda 1, Fila 3 Celda 2, Fila 3 Celda 3, Fila 3
(colspan="", rowspan="") Este comando permite unir dos ó más casillas de una fila con dos ó más casillas de una columna. Este comando se ubica seguido de un espacio después del <td y al final de este comando se ubica un >. Para determinar el número de celdas a unificar en horizontal ó hacia la derecha se pone dicho número entre las comillas después del colspan= y para determinar las celdas a unificar en vertical ó hacia abajo se pone dicho número entre las comillas después del rowspan=.	colspan="", rowspan="" Ejemplo: <table border="1"> <tr> <td colspan="2",rowspan="2"> Celda 1, Fila 1 + Celda 2, Fila 1 + Celda 1, Fila 2 + Celda 2, Fila 2 1</td> <td>Celda 3, Fila 1</td> </tr> <tr> <td>Celda 3, Fila 2</td> </tr> <tr> <td>Celda 1, Fila 3</td> <td>Celda 2, Fila 3</td> <td>Celda 3, Fila 3</td> </tr> </table>	Celda 1, Fila 1 + Celda 2, Fila 1 + Celda 1, Fila 2 + Celda 2, Fila 2 Celda 3, Fila 1 Celda 3, Fila 2 Celda 1, Fila 3 Celda 2, Fila 3 Celda 3, Fila 3