HTML - Tablas
Las tablas HTML permiten a los autores web organizar datos como texto, imágenes, enlaces, otras tablas, etc. en filas y columnas de celdas.
Las tablas HTML se crean utilizando el <table> etiqueta en la que el <tr> se utiliza para crear filas de tabla y <td>La etiqueta se utiliza para crear celdas de datos. Los elementos debajo de <td> son regulares y están alineados a la izquierda por defecto
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Aquí el borderes un atributo de la etiqueta <table> y se usa para poner un borde en todas las celdas. Si no necesita un borde, puede usar border = "0".
Encabezado de la tabla
El encabezado de la tabla se puede definir usando <th>etiqueta. Esta etiqueta se colocará para reemplazar la etiqueta <td>, que se usa para representar la celda de datos real. Normalmente pondrá su fila superior como encabezado de tabla como se muestra a continuación, de lo contrario, puede usar el elemento <th> en cualquier fila. Los encabezados, que se definen en la etiqueta <th>, están centrados y en negrita de forma predeterminada.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Atributos de Cellpadding y Cellspacing
Hay dos atributos llamados relleno de celdas y espacio de celdas que utilizará para ajustar el espacio en blanco en las celdas de su tabla. El atributo de espacio de celda define el espacio entre las celdas de la tabla, mientras que el relleno de celda representa la distancia entre los bordes de la celda y el contenido dentro de una celda.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Atributos de Colspan y Rowspan
Usarás colspanatributo si desea fusionar dos o más columnas en una sola columna. De manera similar usarásrowspan si desea fusionar dos o más filas.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Fondos De Tablas
Puede configurar el fondo de la tabla utilizando una de las dos formas siguientes:
bgcolor atributo: puede establecer el color de fondo para toda la tabla o solo para una celda.
background atributo: puede establecer una imagen de fondo para toda la tabla o solo para una celda.
También puede establecer el color del borde también usando bordercolor atributo.
Note- Los atributos bgcolor , background y bordercolor están en desuso en HTML5. No utilice estos atributos.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Aquí hay un ejemplo de uso backgroundatributo. Aquí usaremos una imagen disponible en el directorio / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado. Aquí la imagen de fondo no se aplica al encabezado de la tabla.
Altura y ancho de la mesa
Puede establecer el ancho y la altura de una mesa usando width y heightatributos. Puede especificar el ancho o alto de la tabla en términos de píxeles o en términos de porcentaje del área de pantalla disponible.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Título de la tabla
los captionLa etiqueta servirá como título o explicación para la tabla y aparecerá en la parte superior de la tabla. Esta etiqueta está obsoleta en la versión más reciente de HTML / XHTML.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Encabezado, cuerpo y pie de página de la tabla
Las tablas se pueden dividir en tres partes: un encabezado, un cuerpo y un pie. El encabezado y el pie son bastante similares a los encabezados y pies de página en un documento de procesamiento de texto que siguen siendo los mismos para cada página, mientras que el cuerpo es el principal contenedor de contenido de la tabla.
Los tres elementos para separar la cabeza, el cuerpo y el pie de una mesa son:
<thead> - para crear un encabezado de tabla independiente.
<tbody> - para indicar el cuerpo principal de la tabla.
<tfoot> - para crear un pie de tabla separado.
Una tabla puede contener varios elementos <tbody> para indicar diferentes páginas o grupos de datos. Pero es notable que las etiquetas <thead> y <tfoot> deberían aparecer antes que <tbody>
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Tablas anidadas
Puede usar una mesa dentro de otra mesa. No solo tablas, puede usar casi todas las etiquetas dentro de la etiqueta de datos de tabla <td>.
Ejemplo
A continuación, se muestra el ejemplo del uso de otra tabla y otras etiquetas dentro de una celda de tabla.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado: