Taller > HTML

La Etiqueta <table> en HTML

Como podrás notar o ya conocerás, HTML se organiza por etiquetas, las cuales están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. Las etiquetas más utlizadas en una tabla son las siguientes: Veremos el código de la tabla. Si existe más contenido escrito, veremos el código de todo, pero nos vamos a centrar únicamente con el código de la tabla que queremos personalizar. El formato debe ser algo parecido, una etiqueta <table> </table> englobada dentro de la etiqueta .

El código HTML utilizado es el siguiente:

Se puede profundizar en la edición del estilo de una tabla modificando su código HTML.

F1, C1	Columna 2	Columna 3	Columna 4
Fila 2	Celda 01	Celda 02	Celda 03
Fila 3	Celda 04	Celda 05	Celda 06
Fila 4	Celda 07	Celda 08	Celda 09

Vamos a aprender a realizar las siguientes acciones mediante código HTML:

1COMBINAR COLUMNAS
2COMBINAR FILAS
3CAMBIAR ANCHO DE COLUMNA
4CAMBIAR ALTO DE FILA
5SOMBREAR UN GRUPO DE CELDAS
6SOMBREAR UN GRUPO DE FILAS
7SOMBREAR UN GRUPO DE COLUMNAS
8SOMBREAR LA TABLA
9AÑADIR UN BORDE EXTERIOR
10CAMBIAR LOS BORDES HORIZONTALES
11CAMBIAR LOS BORDES VERTICALES
12CAMBIAR LOS BORDES DE LA TABLA
13CAMBIAR LOS BORDES DE UN GRUPO DE CELDAS
14CAMBIAR LAS PROPIEDADES DE FUENTE

COMBINAR COLUMNAS

Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente que sean de encabezado o normales, es el atributo colspan, el cual permite realizar la combinación de varias columnas en una sola. Para especificar el valor del atributo, se ha de indicar el número de columnas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles. Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

< tr >
< th scope = " row " >
Fila 2
</ th >
< td > Celda 01 </ td >
< td > Celda 02 </ td >
< td > Celda 03 </ td >
</ tr >

Modificaciones

< tr >
< th scope="row">
Fila 2
</th>
<td colspan= "2">
Celda 01 y 02
</td>
<td>
Celda 03
</ td >
</ tr >

Visualización

COMBINAR FILAS

Al igual que se puede realizar la combinación de columnas, también se puede realizar la combinación de filas, mediante el atributo rowspan. Para especificar el valor del atributo, se ha de indicar el número de filas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles. Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Filas
<tr>
<th scope="row">Fila 2</th>
<td> Celda 01 </td>
<td>Celda 02</td>
< td> Celda 03 </td>
</ tr>
< tr>
< th scope = " row " >
Fila 3
</ th >
<td> Celda 04 </td>
< td> Celda 05 </ td >
< td > Celda 06 </ td >
</ tr >

Visualización

CAMBIAR ANCHO DE COLUMNA

Se pueden realizar agrupaciones de columnas para aplicar un formato por separado o en común a las mismas, para realizar estas agrupaciones se ha de utilizar la etiqueta <colgroup>, especificando a continuación como su contenido y mediante la etiqueta <col>, las columnas y el ámbito de las mismas sobre el cual se quiere aplicar el formato. Si nuestra tabla tiene 3 columnas, mediante estas etiquetas podremos configurar, por ejemplo, los anchos de cada una de las columna. El ancho de una columna se define mediante el atributo style con el subatributo width en el interior con el valor numérico del ancho entre comillas. Para que el contenido se adapte a todo tipo de pantallas, se recomienda que los anchos se definan en porcentaje. Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						  <thead>

Modificaciones

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						  <colgroup>
						    <col style="width: 30%"/>
						    <col style="width: 17.5%"/>
						    <col style="width: 17.5%"/>
						    <col style="width: 17.5%"/>
						  </colgroup>
						  <thead>

Visualización 2

CAMBIAR ALTO DE FILA

También podemos modificar el alto de las filas. El alto de una fila se define mediante el atributo style con el subatributo height en el interior con el valor numérico del alto entre comillas. Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

   <tr>
						      <th scope="row">Fila 2</th>
						      <td>Celda 01</td>
						      <td>Celda 02</td>
						      <td>Celda 03</td>
						    </tr>
						    <tr>
						      <th scope="row">Fila 3</th>
						      <td>Celda 04</td>
						      <td>Celda 05</td>
						      <td>Celda 06</td>
						    </tr>

Modificaciones

   <tr style="height: 100px">
						      <th scope="row">Fila 2</th>
						      <td>Celda 01</td>
						      <td>Celda 02</td>
						      <td>Celda 03</td>
						    </tr>
						    <tr style="height: 50px">
						      <th scope="row">Fila 3</th>
						      <td>Celda 04</td>
						      <td>Celda 05</td>
						      <td>Celda 06</td>
						    </tr>

Visualización 3

SOMBREAR UN GRUPO DE CELDAS

Esta opción provoca que se pierda el formato "Tabla estilo cebra" y "Tabla dinámica" de las celdas seleccionadas.

Podemos sombrear una celda o un grupo de celdas indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se pondrá dentro de la etiqueta <td> o <th> de cada celda que queramos sombrear. Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

		<tr>
									<th scope="row">Fila 2</th>
									<td>Celda 01</td>
									<td>Celda 02</td>
									<td>Celda 03</td>
								</tr>

Modificaciones

		<tr>
									<th scope="row">Fila 2</th>
									<td style="background-color: #FAEBD7">Celda 01</td>
									<td style="background-color: rgb(144, 238, 144)">Celda 02</td>
									<td>Celda 03</td>
								</tr>

Visualización

Celda 01 sombreada con el color "antiquewhite" - #FAEBD7 - rgb(250, 235, 215). Celda 02 sombreada con el color "lightgreen" - #90EE90 - rgb(144, 238, 144).

SOMBREAR UN GRUPO DE FILAS

Esta opción provoca que se pierda el formato "Tabla estilo cebra" y "Tabla dinámica" de las filas seleccionadas.

Podemos sombrear una fila o un grupo de filas indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se pondrá dentro de la etiqueta <tr> de cada celda que queramos sombrear. Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

		<tr>
									<th scope="row">Fila 2</th>
									<td>Celda 01</td>
									<td>Celda 02</td>
									<td>Celda 03</td>
								</tr>
								<tr>
									<th scope="row">Fila 3</th>
									<td>Celda 04</td>
									<td>Celda 05</td>
									<td>Celda 06</td>
								</tr>

Modificaciones

		<tr style="background-color: #FFA500">
									<th scope="row">Fila 2</th>
									<td>Celda 01</td>
									<td">Celda 02</td>
									<td>Celda 03</td>
								</tr>
								<tr style="background-color: rgb(255, 192, 203)">
									<th scope="row">Fila 3</th>
									<td>Celda 04</td>
									<td>Celda 05</td>
									<td>Celda 06</td>
								</tr>

Visualización

Fila 2 sombreada con el color "orange" - #FFA500 - rgb(255, 165, 0). Fila 3 sombreada con el color "pink" - #FFC0CB - rgb(255, 192, 203).

SOMBREAR UN GRUPO DE COLUMNAS

Esta opción no se visualiza correctamente si "Tabla estilo cebra" está activada.

Podemos sombrear una columna o un grupo de columna indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se hará uso de la etiqueta <colgroup> vista más arriba. Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>

Modificaciones

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover" style="width:100.0%">
						    <colgroup>
						        <col/>
						        <col style="background-color: #FFFAF0"/>
						        <col style="background-color: rgb(248, 248, 255)"/>
						        <col/>
						    </colgroup>
						    <thead>

Visualización 6

Columna 2 sombreada con el color "floralwhite" - #FFFAF0 - rgb(255, 250, 240). Columna 3 sombreada con el color "ghostwhite" - #F8F8FF - rgb(248, 248, 255). Opción "Tabla estilo cebra" desactivada.

SOMBREAR LA TABLA

Podemos sombrear la tabla entera con el mismo color indicándolo en el atributo style con el subatributo background-color en el interior con el color en código HTML o su código RGB (Tabla de colores). Se pondrá dentro de la etiqueta <table>. El atributo style puede contener más de un subatributo, separando cada uno de ellos con un punto y coma ";". Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>

Modificaciones

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover" style="width:100.0%; background-color: #FFE4E1">
						    <thead>

Visualización

Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240). Opción "Tabla estilo cebra" desactivada.

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>

Modificaciones

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%; background-color: #FFE4E1">
						    <thead>

Visualización

Tabla sombreada con el color "mistyrose" - #FFE4E1 - rgb(255, 250, 240). Opción "Tabla estilo cebra" activada.

AÑADIR UN BORDE EXTERIOR

Podemos añadir un borde exterior que rodee la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se pondrá dentro de la etiqueta <table>. El atributo style puede contener más de un subatributo, separando cada uno de ellos con un punto y coma ";".

El tipo de borde se refiere a cómo será la línea:

Valor	Descripción
hidden	Oculto. Idéntico a none, salvo para conflictos con tablas.
dotted	Establece un borde basado en puntos.
dashed	Establece un borde basado en rayas (línea discontínua).
solid	Establece un borde sólido (línea contínua).
double	Establece un borde doble (dos líneas contínuas).
groove	Establece un borde biselado con luz desde arriba.
ridge	Establece un borde biselado con luz desde abajo. Opuesto a groove.
inset	Establece un borde con profundidad «hacia dentro».
outset	Establece un borde con profundidad «hacia fuera». Opuesto a inset.

Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>

Modificaciones

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped"
						style="width:100.0%; border: #FF4500 4px double">
						  <thead>

Visualización

Tabla rodeada con un borde color "orangered" - #FF4500 - rgb(255, 69, 0), 4px de ancho de borde, tipo de borde "double".

CAMBIAR LOS BORDES HORIZONTALES

Podemos cambiar los bordes horizontales de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se definirá el estilo dentro de una etiqueta <style> </style>. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px). Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>

Modificaciones

<style>
						  table tr {
						    border: #6A5ACD 2.0px dotted;
						  }
						</style>
						<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>

Visualización

Tabla rodeada con un borde color "slateblue" - #6A5ACD - rgb(106, 90, 205), 2px de ancho de borde, tipo de borde "dotted".

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						     <thead>
						    <tr>
						      <th scope="row">F1, C1</th>
						      <th scope="col">Columna 2</th>
						      <th scope="col">Columna 3</th>
						      <th scope="col">Columna 4</th>
						    </tr>
						  </thead>
						  <tbody>

Modificaciones

<style>
						  table tr {
						    border: #6A5ACD 2.0px dotted;
						  }
						</style>
						<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						  <tbody>
						    <tr>
						      <th scope="row">F1, C1</th>
						      <th scope="col">Columna 2</th>
						      <th scope="col">Columna 3</th>
						      <th scope="col">Columna 4</th>
						    </tr>

Visualización

Tabla rodeada con un borde color "slateblue" - #6A5ACD - rgb(106, 90, 205), 2px de ancho de borde, tipo de borde "dotted". Cabecera de tabla movida al cuerpo.

CAMBIAR LOS BORDES VERTICALES

Podemos cambiar los bordes verticales de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se hará uso de la etiqueta <colgroup> vista más arriba. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px). Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>

Modificaciones

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <colgroup>
						        <col style="border: #FFFF00 2.0px solid"/>
						        <col style="border: #FFFF00 2.0px solid"/>
						        <col style="border: #FFFF00 2.0px solid"/>
						        <col style="border: #FFFF00 2.0px solid"/>
						    </colgroup>
						    <thead>

Visualización

Tabla rodeada con un borde color "yellow" - #FFFF00 - rgb(255, 255, 0), 2px de ancho de borde, tipo de borde "solid".

CAMBIAR LOS BORDES DE LA TABLA

Esta opción no funcionará si "Tabla con bordes" está activada.

Podemos cambiar los bordes de la tabla entera indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se definirá el estilo dentro de una etiqueta <style> </style>. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px).Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						     <thead>
						    <tr>
						      <th scope="row">F1, C1</th>
						      <th scope="col">Columna 2</th>
						      <th scope="col">Columna 3</th>
						      <th scope="col">Columna 4</th>
						    </tr>
						  </thead>
						  <tbody>

Modificaciones

<style>
						    table td, table th, table tr {
						        border: #000000 1.1px solid;
						    }
						</style>
						<div class="table-responsive">
						<table class="table table-condensed
						table-hover table-striped" style="width:100.0%">
						    <tbody>
						    <tr>
						      <th scope="row">F1, C1</th>
						      <th scope="col">Columna 2</th>
						      <th scope="col">Columna 3</th>
						      <th scope="col">Columna 4</th>
						    </tr>

Visualización

Tabla rodeada con un borde color "black" - #000000 - rgb(0, 0, 0), 1.1px de ancho de borde, tipo de borde "solid". Cabecera movida al cuerpo. Opción "Tabla con bordes" desactivada.

CAMBIAR LOS BORDES DE UN GRUPO DE CELDAS

Esta opción no funcionará si "Tabla con bordes" está activada.

Podemos cambiar los bordes de una o varias celdas indicándolo en el atributo style con el subatributo border en el interior con el color en código HTML o su código RGB (Tabla de colores), el ancho del borde y el tipo de borde. Se pondrá dentro de la etiqueta <td> o <th> de cada celda que queramos cambiar el borde. El tipo de borde se refiere a cómo será la línea. Se han indicado más arriba que tipo existen. Se deberá mover la cabecera de la tabla al cuerpo de la tabla y usar un ancho mínimo de borde superior a 1px (si queremos usar un borde de ancho 1px, podemos poner 1.1px).Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>
						        <tr>
						            <th scope="row">F1, C1</th>
						            <th scope="col">Columna 2</th>
						            <th scope="col">Columna 3</th>
						            <th scope="col">Columna 4</th>
						        </tr>
						    </thead>
						    <tbody>
						        <tr>
						            <th scope="row">Fila 2</th>
						            <td>Celda 01</td>
						            <td>Celda 02</td>
						            <td>Celda 03</td>
						        </tr>

Modificaciones

<table class="table table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>
						        <tr>
						            <th scope="row">F1, C1</th>
						            <th scope="col">Columna 2</th>
						            <th scope="col">Columna 3</th>
						            <th scope="col">Columna 4</th>
						        </tr>
						    </thead>
						    <tbody>
						        <tr>
						            <th scope="row">Fila 2</th>
						            <td style="border: #6A5ACD 2.0px dotted;">Celda 01</td>
						            <td style="border: #0000FF 5.0px solid;">Celda 02</td>
						            <td>Celda 03</td>
						        </tr>

Visualización

Celda 01 sombreada con el color "slateblue" - #6A5ACD - rgb(106, 90, 205). Celda 02 sombreada con el color "blueblue" - #0000FF - rgb(0, 0, 255). Opción "Tabla con bordes" desactivada.

Código original

<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>
						        <tr>
						            <th scope="row">F1, C1</th>
						            <th scope="col">Columna 2</th>
						            <th scope="col">Columna 3</th>
						            <th scope="col">Columna 4</th>
						        </tr>
						    </thead>
						    <tbody>
						        <tr>
						            <th scope="row">Fila 2</th>
						            <td>Celda 01</td>
						            <td>Celda 02</td>
						            <td>Celda 03</td>
						        </tr>

Modificaciones

<table class="table table-condensed
						table-hover table-striped" style="width:100.0%">
						    <tbody>
						        <tr>
						            <th scope="row">F1, C1</th>
						            <th scope="col">Columna 2</th>
						            <th scope="col">Columna 3</th>
						            <th scope="col">Columna 4</th>
						        </tr>    
						        <tr>
						            <th scope="row">Fila 2</th>
						            <td style="border: #6A5ACD 2.0px dotted;">Celda 01</td>
						            <td style="border: #0000FF 5.0px solid;">Celda 02</td>
						            <td>Celda 03</td>
						        </tr>

Visualización

Celda 01 sombreada con el color "slateblue" - #6A5ACD - rgb(106, 90, 205). Celda 02 sombreada con el color "blueblue" - #0000FF - rgb(0, 0, 255). Cabecera movida al cuerpo. Opción "Tabla con bordes" desactivada.

CAMBIAR LAS PROPIEDADES DE FUENTE

Podemos cambiar las propiedades de fuente de una celda, una fila o una columna, un grupo de celdas, de filas o de columnas o de toda la tabla indicándolo en el atributo style con el subatributo font-style, color (con el color en código HTML o su código RGB (Tabla de colores) en el interior) y font-size con el tamaño indicado en pixeles. Se pondrá dentro de la etiqueta <td>, <th>, <tr> o <table> de cada celda que queramos sombrear.

Los tipos de estilo de fuente que se puede definir mediante font-size son los siguientes:

Valor	Descripción
normal	El navegador muestra un estilo de fuente normal. Esto es predeterminado.
italic	El navegador muestra un estilo de fuente en cursiva.
oblique	El navegador muestra un estilo de fuente oblicuo.

Veámoslo con un ejemplo:

Hacemos los siguientes cambios en nuestro código HTML de ejemplo:

Código original

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped" style="width:100.0%">
						    <thead>
						        <tr>
						            <th scope="row">F1, C1</th>
						            <th scope="col">Columna 2</th>
						            <th scope="col">Columna 3</th>
						            <th scope="col">Columna 4</th>
						        </tr>
						    </thead>
						    <tbody>
						    <tr>
						      <th scope="row">Fila 2</th>
						      <td>Celda 01</td>
						      <td>Celda 02</td>
						      <td>Celda 03</td>
						    </tr>

Modificaciones

<div class="table-responsive">
						<table class="table table-bordered table-condensed
						table-hover table-striped"
						style="width:100.0%; color: #5F9EA0">
						    <thead>
						        <tr>
						            <th scope="row">F1, C1</th>
						            <th scope="col">Columna 2</th>
						            <th scope="col">Columna 3</th>
						            <th scope="col">Columna 4</th>
						        </tr>
						    </thead>
						    <tbody>
						    <tr style="font-style: italic">
						      <th scope="row">Fila 2</th>
						      <td>Celda 01</td>
						      <td style="font-size: 25px;">Celda 02</td>
						      <td style="color: #FF7F50;">Celda 03</td>
						    </tr>

Visualización

Color de fuente de la tabla "cadetblue" - #5F9EA0 - rgb(95, 158, 160). Fila 2 en itálica. Celda 02 con tamaño de fuente 25px. Celda 03 con color de fuente de la tabla "coral" - #FF7F50 - rgb(255, 127, 80).

Hola 3 - Fin de la 1.

Punto 2

TABLE

Hola

Encabezado 1	Encabezado 2
Celda 1	Celda 2

El código HTML utilizado es el siguiente:

Grupo 3

<div class="table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped" style="width:100.0%"> <thead> <tr> <th scope="row">F1, C1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> <th scope="col">Columna 4</th> </tr> </thead> <tbody> <tr> <th scope="row">Fila 2</th> <td>Celda 01</td> <td>Celda 02</td> <td>Celda 03</td> </tr> <tr> <th scope="row">Fila 3</th> <td>Celda 04</td> <td>Celda 05</td> <td>Celda 06</td> </tr> <tr> <th scope="row">Fila 4</th> <td>Celda 07</td> <td>Celda 08</td> <td>Celda 09</td> </tr> </tbody> </table> </div>

El formato debe ser una etiqueta <table> </table> englobada dentro de la etiqueta <div class="table-responsive"> </div>.

HTML se organiza por etiquetas, constituidas al inicio y al final por los signos < y >, que representan la apertura y el cierre de cada elemento. Las etiquetas más utlizadas en una tabla son las siguientes:

Etiquetas	Descripción
<table>	Definición de una tabla.
<th>	Definición de cabecera de tabla. El atributo scope que aparece en el ejemplo no es necesario utilizarlo.
<tr>	Define una fila en la tabla.
<td>	Define una celda en la tabla.
<caption>	Define el nombre o título de la tabla.
<colgroup>	Especifica un grupo de una o más columnas para aplicar formato.
<col>	Especifica las propiedades de una columna de las columnas definidas en un elemento colgroup.
<thead>	Define la cabecera de la tabla.
<tbody>	Define el cuerpo de la tabla.
<tfoot>	Define el pie de la tabla.

Observando la estructura de la tabla, vemos como se configuran filas <tr> </tr> y, dentro de cada fila, se configuran las celdas (ya sean cabecera <th> </th> o normales <td> </td>).

Tabla 2 td 1

Tabla 2 td 2 logo país

Search Engine Colossus código A index 2

Tabla 2 td 3

Página País Zimbabwe
imagen boton
código A index
código A Página Académico

La Etiqueta <table> en HTML

La etiqueta <table> de HTML se utiliza para crear tablas en un documento HTML. Dentro de una tabla, se pueden incluir filas y celdas para organizar y presentar información de manera estructurada.
La estructura básica de una tabla consta de una etiqueta <table> que envuelve a otras etiquetas como <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>.
La etiqueta <thead> se usa para crear un encabezado de tabla que se mostrará al principio de la tabla y se utiliza para describir las columnas.
La etiqueta <tbody> se utiliza para crear el cuerpo de la tabla, donde se incluyen las filas y celdas con los datos.
La etiqueta <tfoot> se utiliza para crear un pie de tabla que se mostrará al final de la tabla y se utiliza para mostrar información resumen.
La etiqueta <tr> se utiliza para crear una fila en la tabla.
La etiqueta <th> se utiliza para crear una celda de encabezado en una fila.
La etiqueta <td> se utiliza para crear una celda de datos en una fila.
Además de estas etiquetas, también se pueden utilizar atributos para personalizar la apariencia y el comportamiento de la tabla, como el ancho, el borde, el alineamiento, etc.

Ejemplo de uso
Aquí tienes un ejemplo básico de cómo utilizar la etiqueta <table> en HTML para crear una tabla sencilla con un encabezado y varias filas de datos:

<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Pérez</td>
<td>32</td>
</tr>
<tr>
<td>Maria</td>
<td>García</td>
<td>27</td>
</tr>
<tr>
<td>Pedro</td>
<td>Sánchez</td>
<td>45</td>
</tr>
</tbody>
</table>

Este código crea una tabla con un encabezado que tiene tres columnas: “Nombre”, “Apellido” y “Edad”, y tres filas con datos en cada una de ellas.

La tabla se vería así:
Nombre Apellido Edad
Juan Pérez 32
Maria García 27
Pedro Sánchez 45

Nota que en este ejemplo, es importante tener en cuenta que la tabla aparecería sin bordes, ya que no se especificó ningún estilo para ella.

Atributos
Hay varios atributos que se pueden utilizar en la etiqueta <table> para personalizar la tabla. Aquí te muestro algunos de los más comunes:
border: Especifica el tamaño del borde de la tabla en pixels. Por ejemplo, border=»1″ mostraría un borde de 1 pixel de ancho alrededor de la tabla.
width: Especifica el ancho de la tabla en pixels o porcentaje. Por ejemplo, width=»100%» haría que la tabla ocupe el ancho completo de la pantalla.
align: Especifica la alineación de la tabla en relación con el contenido que la rodea. Puede ser “left”, “center” o “right”.
cellpadding: Especifica el espacio en pixels entre el contenido de las celdas y los bordes de las celdas.
cellspacing: Especifica el espacio en pixels entre las celdas de la tabla.
summary: Proporciona una descripción breve de la tabla para los usuarios de lectores de pantalla.
bgcolor: Especifica el color de fondo de la tabla. Puede ser un valor hexadecimal o un nombre de color.
frame: Especifica qué partes de los bordes de la tabla deben ser dibujadas. Puede ser “void”, “above”, “below”, “hsides”, “vsides” o “lhs”.
rules: Especifica qué líneas de la tabla deben ser dibujadas. Puede ser “none”, “groups” o “rows”.
cellborder: Especifica el tamaño del borde de las celdas en pixels.
Sin embargo, se recomienda utilizar estilos CSS en lugar de estos atributos para mejorar la accesibilidad y facilidad de mantenimiento del código.

Ejemplo
Un ejemplo de cómo se vería una tabla con estos atributos:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Tabla</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="50%" bgcolor="#F1F1F1" cellspacing="5" cellpadding="10">
<caption align="top">Tabla de ejemplo</caption>
<colgroup span="2" width="50%"></colgroup>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Fila 1, Celda 1</td>
<td>Fila 1, Celda 2</td>
</tr>
<tr>
<td>Fila 2, Celda 1</td>
<td>Fila 2, Celda 2</td>
</tr>
</table>
</body>
</html>

Este ejemplo crea una tabla con un borde de 1px, una separación de 5px entre las celdas y un relleno de 10px alrededor del contenido de cada celda. La tabla tiene un ancho del 50% y se alinea en el centro de la página. Utiliza un fondo gris claro (#F1F1F1) y tiene un encabezado con dos columnas.
Utiliza el atributo colgroup para especificar el ancho de las dos columnas y el span para especificar el número de columnas que se van a aplicar estos atributos.
También tiene un título para la tabla con la etiqueta <caption> y dos encabezados de columna con la etiqueta <th>. Hay dos filas con dos celdas cada una, utilizando las etiquetas <tr> y <td> respectivamente.

La tabla de ejemplo se vería así:
Tabla de ejemplo Encabezado 1 Encabezado 2
Fila 1, Celda 1 Fila 1, Celda 2
Fila 2, Celda 1 Fila 2, Celda 2
Ten en cuenta que este es solo un ejemplo básico y existen muchos otros atributos y etiquetas que puedes utilizar para crear tablas más complejas y personalizadas.

La Etiqueta <caption> en HTML

La etiqueta en HTML se utiliza para añadir un título o una descripción a una tabla. El contenido dentro de la etiqueta se coloca en la parte superior o en la parte inferior de la tabla, dependiendo de la configuración del navegador y de los estilos CSS que se apliquen. Es importante tener en cuenta que solo se puede utilizar una etiqueta por tabla. La sintaxis básica de una etiqueta es la siguiente:

Lenguaje del código: HTML, XML (xml) También se puede utilizar el atributo align para especificar si el título se colocará en la parte superior (top) o en la parte inferior (bottom) de la tabla:

Lenguaje del código: HTML, XML (xml) Es importante tener en cuenta que el contenido dentro de la etiqueta debe ser HTML válido. Además, esta etiqueta ayuda a mejorar la accesibilidad y la semántica de la página, haciendo más fácil para los usuarios entender el contenido de la tabla y su título. Tabla de contenidos Ejemplo de uso Atributos Ejemplos Ejemplo de uso Un ejemplo de cómo utilizar la etiqueta en HTML podría ser el siguiente:

Ventas mensuales
Mes	Ventas
Enero	$5,000
Febrero	$6,500
Marzo	$8,000

Lenguaje del código: HTML, XML (xml) En este ejemplo, se utiliza la etiqueta para añadir un título a la tabla “Ventas mensuales”. El título se colocará en la parte superior de la tabla, dependiendo de la configuración del navegador y de los estilos CSS que se apliquen. Atributos La etiqueta en HTML tiene dos atributos específicos, los cuales son: align: Este atributo se utiliza para especificar si el título de la tabla se colocará en la parte superior (top) o en la parte inferior (bottom) de la tabla. El valor por defecto es top. id: Este atributo se utiliza para especificar un identificador único para la etiqueta , el cual puede ser utilizado para hacer referencia a ella en otras partes del código, como en un archivo de estilos CSS o en un script JavaScript. Además, también se pueden utilizar los atributos globales comunes en HTML, como class, style, title, entre otros, para aplicar estilos o identificar de manera específica al elemento en el DOM. Ejemplos Un ejemplo de cómo utilizar el atributo align de la etiqueta en HTML podría ser el siguiente:

Ventas mensuales
Mes	Ventas
Enero	$5,000
Febrero	$6,500
Marzo	$8,000

Lenguaje del código: HTML, XML (xml) En este ejemplo, se utiliza el atributo align para especificar que el título “Ventas mensuales” se colocará en la parte inferior de la tabla. Un ejemplo de cómo utilizar el atributo id de la etiqueta en HTML podría ser el siguiente:

Ventas mensuales
Mes	Ventas
Enero	$5,000
Febrero	$6,500
Marzo	$8,000

Lenguaje del código: HTML, XML (xml) En este ejemplo, se utiliza el atributo id para especificar un identificador único “ventas-mensuales” para la etiqueta . Este identificador puede ser utilizado para hacer referencia a ella en otras partes del código, como en un archivo de estilos CSS o en un script JavaScript. Por ejemplo, en un archivo de estilos CSS se puede utilizar el identificador para darle un estilo específico al título de la tabla: #ventas-mensuales { font-size: 20px; font-weight: bold; }

La Etiqueta <col> en HTML caption

La Etiqueta en HTML La etiqueta en HTML se utiliza para definir las características de una o varias columnas en una tabla. Es utilizada dentro de un y se utiliza para especificar atributos como el ancho, el alineamiento, el color de fondo y el estilo de la fuente. Estos atributos se aplican a todas las celdas en la columna o columnas especificadas. La sintaxis básica de una etiqueta es la siguiente: Lenguaje del código: HTML, XML (xml) Además, el atributo span se utiliza para especificar el número de columnas a las que se aplican los atributos en la etiqueta . Por ejemplo, si se especifica el valor “2” para el atributo span, los atributos se aplicarán a dos columnas consecutivas. Tabla de contenidos Ejemplo de uso Atributos Ejemplos: Ejemplo de uso Aquí tienes un ejemplo de cómo se utiliza la etiqueta en HTML:

Nombre	Apellido	Correo electrónico
Juan	Pérez	juanperez@gmail.com
Maria	Garcia	mariagarcia@gmail.com

Lenguaje del código: HTML, XML (xml) En este ejemplo, se utiliza la etiqueta para agrupar tres etiquetas . Cada etiqueta tiene un atributo span con valor “1” y un atributo style con un ancho específico para cada columna. Los valores de estilo son aplicados a las columnas de la tabla, especificando el ancho de las mismas. Es importante destacar que los atributos span y style son opcionales, pueden ser utilizados juntos o por separado, dependerá de las necesidades de tu tabla. Atributos Los atributos más importantes de la etiqueta de HTML son: span: Este atributo especifica el número de columnas que la etiqueta debe cubrir. Por ejemplo, si el valor es “2”, entonces la etiqueta cubrirá dos columnas en la tabla. Este atributo es opcional y su valor predeterminado es “1”. style: Este atributo permite especificar el estilo de la columna a través de una hoja de estilo en línea (CSS). Puedes utilizar este atributo para especificar el ancho de la columna, el color de fondo, el borde, entre otros estilos. width: Este atributo especifica el ancho de la columna. El valor puede ser un número en píxeles o un porcentaje. Si se especifica un valor en píxeles, el ancho de la columna será fijo. Si se especifica un valor en porcentaje, el ancho de la columna será proporcional al ancho de la tabla. align: Este atributo especifica el alineamiento de los datos en la columna. Los valores posibles son “left”, “center” y “right”. valign: Este atributo especifica el alineamiento vertical de los datos en la columna. Los valores posibles son “top”, “middle” y “bottom”. Es importante mencionar que estos atributos son opcionales y pueden ser utilizados juntos o por separado para especificar el número de columnas y el estilo de las mismas. Ejemplos: Aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta de HTML: Utilizando el atributo span:

Columna 1	Columna 2
Columna 3	Columna 4

Lenguaje del código: HTML, XML (xml) En este ejemplo, la etiqueta cubre dos columnas en la tabla. Utilizando el atributo style:

Columna 1	Columna 2
Columna 3	Columna 4

Lenguaje del código: HTML, XML (xml) En este ejemplo, se especifica que la columna tendrá un fondo color beige y un ancho del 50% de la tabla. Utilizando el atributo width:

Columna 1	Columna 2
Columna 3	Columna 4

Lenguaje del código: HTML, XML (xml) En este ejemplo, se especifica que la columna tendrá un ancho de 100px. Utilizando el atributo align:

Columna 1	Columna 2
Columna 3	Columna 4

Lenguaje del código: HTML, XML (xml) En este ejemplo, se especifica que el contenido de la columna estará alineado al centro. Utilizando el atributo valign:

Columna 1	Columna 2
Columna 3	Columna 4

Lenguaje del código: HTML, XML (xml) En este ejemplo, se especifica que el contenido de la columna estará alineado en la parte superior de la celda. Es importante mencionar que estos son solo algunos ejemplos de cómo usar los atributos de la etiqueta de HTML, y que existen otros atributos que también se pueden utilizar, como class, id, lang, entre otros. Sin embargo, los atributos mencionados anteriormente son los más comunes y útiles para especificar el estilo y comportamiento de una columna en una tabla. También es importante mencionar que, al utilizar la etiqueta , es necesario tener en cuenta que solo se aplican a los estilos y comportamientos de la columna, no a las celdas.

La Etiqueta <colgroup> en HTML caption

La etiqueta <colgroup> de HTML se utiliza para agrupar varias columnas de una tabla con estilos y comportamientos similares. Puede ser utilizada para especificar el ancho de las columnas, el alineamiento, el color de fondo, entre otros. Al utilizar esta etiqueta, los estilos y comportamientos especificados se aplican a todas las columnas dentro del grupo. El uso de la etiqueta <colgroup> es opcional, pero puede ser útil cuando se quieren aplicar estilos y comportamientos similares a varias columnas de una tabla. Esta etiqueta debe colocarse antes de la etiqueta <thead> o <tbody> para que se aplique a todas las columnas de la tabla. Ejemplo de uso Aquí tienes un ejemplo de cómo se utiliza la etiqueta <colgroup> en HTML: <table> <colgroup span="2" style="background-color: #ddd;"></colgroup> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> </tr> </tbody> </table> En este ejemplo se utiliza el atributo span para especificar que el grupo de columnas incluye 2 columnas y el atributo style para especificar el color de fondo de las columnas en el grupo. Atributos Los atributos más importantes de la etiqueta <colgroup> de HTML son: span: Este atributo especifica el número de columnas que se incluyen en el grupo. style: Este atributo se utiliza para especificar estilos CSS para las columnas en el grupo, como el ancho, el color de fondo, el alineamiento, entre otros. class: Este atributo se usa para asignar una o varias clases CSS a las columnas en el grupo, lo que permite aplicar estilos a través de un archivo CSS externo. id: Este atributo se utiliza para asignar un identificador único a las columnas en el grupo, lo que permite aplicar estilos específicos a través de un archivo CSS externo. align: Este atributo se utiliza para especificar el alineamiento de las columnas en el grupo (izquierda, derecha, centro). Cabe mencionar que estos atributos son los más comunes y usados, pero pueden existir otros atributos dependiendo del contexto y necesidad. Ejemplos Aquí te presento algunos ejemplos de cómo utilizar los atributos más importantes de la etiqueta de HTML: Utilizando el atributo span para especificar el número de columnas en el grupo:

Header 1	Header 2	Header 3
Value 1	Value 2	Value 3

En este ejemplo se especifica que el grupo de columnas incluye 3 columnas, las cuales son las primeras tres columnas de la tabla. Utilizando el atributo style para especificar estilos para las columnas en el grupo:

Header 1	Header 2
Value 1	Value 2

En este ejemplo se especifica el color de fondo y el ancho para las columnas en el grupo. Utilizando el atributo class para asignar una clase CSS a las columnas en el grupo:

Header 1	Header 2
Value 1	Value 2

En este ejemplo se asigna la clase “highlight” a las columnas en el grupo, lo que permite aplicar estilos específicos a través de un archivo CSS externo. Utilizando el atributo id para asignar un identificador único a las columnas en el grupo:

Header 1	Header 2
Value 1	Value 2

En este ejemplo se asigna el identificador “important-columns” a las columnas en el grupo, lo que permite aplicar estilos específicos a través de un archivo CSS externo. Utilizando el atributo align para asignar una clase CSS a las columnas en el grupo:

Header 1	Header 2
Value 1	Value 2

En este ejemplo, se utiliza el atributo align para especificar que el contenido de las columnas en el grupo estará centrado. Al hacer esto, todas las celdas en las columnas incluidas en el grupo se centrarán automáticamente. Es importante notar que el atributo align establece la alineación horizontal del contenido de las celdas. El atributo valign establece la alineación vertical del contenido de las celdas. Un ejemplo de uso de la etiqueta <colgroup> con el atributo valign podría ser el siguiente:

Header 1	Header 2
Value 1	Value 2
Value 3	Value 4

En este ejemplo, se usa el atributo valign para especificar que el contenido de las celdas en el grupo estará alineado en la parte superior. Al hacer esto, todas las celdas en las columnas incluidas en el grupo se alinearán automáticamente en la parte superior.

La Etiqueta <thead> en HTML

La etiqueta <thead> en HTML es utilizada para definir un bloque que contiene las celdas de encabezado de una tabla. El contenido dentro de esta etiqueta se considera como un encabezado de tabla y se utiliza para describir el contenido de las columnas de la tabla. El contenido dentro de la etiqueta <thead> se presenta en negrita y centrado por defecto en los navegadores web. También se puede utilizar para aplicar estilos específicos al encabezado de la tabla mediante CSS. Ejemplo de uso Aquí tienes un ejemplo de cómo utilizar la etiqueta <thead> en HTML para crear un encabezado de tabla:

Nombre	Apellido	Edad
Juan	Pérez	25
Maria	Gómez	32
Pedro	López	45

En este ejemplo, la etiqueta <thead> contiene una fila <tr> con tres celdas <th> que representan los encabezados de las columnas “Nombre”, “Apellido” y “Edad”. El contenido dentro de la etiqueta <tbody> representa el cuerpo de la tabla, donde se encuentran los datos de cada fila. Atributos La etiqueta <thead> en HTML no tiene atributos específicos. Sin embargo, puede contener atributos globales como “id”, “class”, “style”, entre otros. Estos atributos son comunes a la mayoría de las etiquetas HTML y son útiles para aplicar estilos y realizar acciones dinámicas en la tabla mediante JavaScript y CSS. Ejemplo Un ejemplo de cómo utilizar la etiqueta con algunos de sus atributos en HTML podría ser el siguiente:

Encabezado 1	Encabezado 2	Encabezado 3
Dato 1	Dato 2	Dato 3
Dato 4	Dato 5	Dato 6

En este ejemplo, se usan los atributos “align” y “valign” para alinear el contenido del encabezado de la tabla al centro y al fondo, respectivamente. Además, dentro de la etiqueta <thead> se encuentra una fila <tr> con varias celdas de encabezado <th> que contienen el texto “Encabezado 1”, “Encabezado 2” y “Encabezado 3”. Otro ejemplo: Otro ejemplo de cómo utilizar varios atributos en la etiqueta <thead> en HTML:

Nombre	Apellido	Edad
Juan	Pérez	30
Maria	García	25

En este ejemplo se utilizan los atributos “align”, “valign” y “bgcolor” para alinear el contenido de la etiqueta <thead> al centro, ajustar la verticalidad del texto a la mitad y cambiar el color de fondo a “#ffcc99” respectivamente.

La Etiqueta <tbody> en HTML caption

La etiqueta de HTML se utiliza para agrupar el contenido de una tabla que representa el cuerpo de la tabla. Esta etiqueta se usa junto con las etiquetas y para organizar el contenido de una tabla en diferentes secciones, permitiendo que el navegador y los motores de búsqueda puedan procesarlo de manera más eficiente. La etiqueta se utiliza para contener las filas de una tabla, que se representan con la etiqueta . Dentro de cada fila, se usan las etiquetas para representar las celdas de la tabla. Ejemplo de uso El siguiente es un ejemplo básico de cómo se utiliza la etiqueta en una tabla:

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2
Footer 1	Footer 2

Lenguaje del código: HTML, XML (xml) En este ejemplo, se ve cómo se agrupa el contenido de la tabla en diferentes secciones, con un encabezado de tabla en , un cuerpo de tabla en y un pie de tabla en . Atributos La etiqueta en HTML no tiene atributos específicos. Sin embargo, puede emplear los atributos globales de HTML, como id, class, style, etc. Ejemplo Aquí tienes un ejemplo de una tabla HTML que utiliza la etiqueta y algunos de los atributos globales de HTML:

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4
Footer 1	Footer 2

Lenguaje del código: HTML, XML (xml) En este ejemplo, se utiliza la etiqueta para agrupar el contenido de la tabla en una sección específica, y se utilizan los atributos id, class y style para aplicar estilos al contenido de la sección. El atributo id se utiliza para darle un identificador único al tbody, el atributo class se utiliza para aplicar estilos en cascada y el atributo style se utiliza para aplicar estilos directamente al elemento. En este ejemplo se establece el fondo de la sección con el id “table-body” y la clase “table-content” en color #f1f1f1.

La Etiqueta <tfoot> en HTML caption

La etiqueta en HTML se utiliza para definir un pie de tabla. El contenido dentro de esta etiqueta se mostrará en una fila o conjunto de filas al final de la tabla. Es comúnmente utilizado para mostrar subtotales, totales o una leyenda de la tabla. Es importante tener en cuenta que el navegador puede mostrar el contenido de antes de que el contenido de para mejorar el acceso a la información de resumen. Es importante tener en cuenta que solo puede haber una etiqueta dentro de una etiqueta y debe ser colocada después de . Ejemplo de uso Un ejemplo de uso de la etiqueta en HTML podría ser el siguiente:

Producto	Precio	Cantidad
Lápiz	$0.50	20
Borrador	$0.25	10
Total		$3.00

Lenguaje del código: HTML, XML (xml) En este ejemplo se crea una tabla con una cabecera, un cuerpo y un pie de tabla. La etiqueta define la cabecera de la tabla, define el cuerpo de la tabla y define el pie de tabla. En este caso el pie de tabla muestra el total de gastos. Atributos La etiqueta de HTML no tiene atributos específicos, pero puede tener los atributos globales de HTML como “id”, “class”, “style”, entre otros. Ejemplo Aquí te muestro un ejemplo completo de cómo utilizar la etiqueta con algunos de los atributos globales de HTML:

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2
This is the table footer

Lenguaje del código: HTML, XML (xml) En este ejemplo se utilizan los atributos “id”, “class” y “style” para dar estilos personalizados al pie de tabla. El atributo “colspan” se usa para unir varias celdas en una sola.

La Etiqueta <tr> en HTML caption

La etiqueta <tr> en HTML representa una fila en una tabla. Es utilizada dentro de una etiqueta <table> para definir una fila de celdas, las cuales son contenidas dentro de etiquetas <td> o <th> (que representan una celda de datos o una celda de encabezado, respectivamente).

Ejemplo de uso
Un ejemplo de uso de la etiqueta <tr> sería:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

En este ejemplo se crean dos filas en una tabla, cada una con tres celdas dentro. El contenido de cada celda es “Celda 1”, “Celda 2”, etc.

Atributos
La etiqueta <tr> no tiene atributos específicos, pero se pueden usar atributos como class, style y id para aplicar estilos.
También se pueden utilizar atributos como align, valign y bgcolor para alinear y cambiar el color de fondo de una fila. Sin embargo, es recomendable utilizar CSS en lugar de estos atributos para aplicar estilos, ya que son considerados obsoletos en HTML5.

Ejemplos
Aquí te muestro un ejemplo de cómo utilizar algunos de los atributos de la etiqueta <tr> en HTML5:
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilos para las celdas de encabezado */
th {
background-color: #ddd;
}
/* Estilos para las celdas de datos */
td {
text-align: center;
padding: 8px;
}
/* Estilos para las filas con el ID data-row-1 */
#data-row-1 {
background-color: #f2f2f2;
}
/* Estilos para las filas con la clase highlight-row */
.highlight-row {
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr id="data-row-1" class="highlight-row">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr id="data-row-2" class="highlight-row">
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>

En este ejemplo, se ha utilizado el atributo id para especificar un identificador único para la fila y el atributo class para especificar una o varias clases para la fila, y se han aplicado estilos en el archivo CSS para personalizar la alineación horizontal y vertical de las celdas, y el color de fondo de una fila.
Es importante mencionar que en este caso, se ha usado las propiedades CSS background-color, vertical-align y text-align en lugar de los atributos bgcolor, valign y align respectivamente, ya que estos últimos son considerados obsoletos en HTML5, y se recomienda utilizar las propiedades CSS en su lugar para estilizar los elementos HTML.
Además, usando las propiedades CSS se tiene un mayor control y flexibilidad en la personalización de los estilos.

La Etiqueta <th> en HTML caption

La etiqueta de HTML es utilizada para definir un encabezado de celda en una tabla. Los encabezados de celda son utilizados para describir el contenido de las celdas en una fila o columna específica. El contenido dentro de la etiqueta se mostrará en negrita y centrado por defecto, pero estos estilos pueden ser modificados utilizando CSS. Ejemplo de uso Un ejemplo de uso de la etiqueta en HTML podría ser:

Nombre	Edad	Ciudad
Juan	30	Madrid
Maria	25	Barcelona

Lenguaje del código: HTML, XML (xml) En este ejemplo, se está creando una tabla con tres columnas “Nombre”, “Edad” y “Ciudad”. Los encabezados de las columnas se especifican utilizando la etiqueta dentro de una fila dentro de un que especifica que es el encabezado de la tabla. Los datos de la tabla se especifican utilizando dentro de dentro de un que especifica que es el cuerpo de la tabla. Atributos Los atributos más comunes de la etiqueta en HTML son: colspan: define el número de columnas que debe ocupar la celda. rowspan: define el número de filas que debe ocupar la celda. headers: define los ID de las celdas que son encabezados para la celda actual. scope: indica el ámbito de la celda, puede ser “col” para indicar que es un encabezado de columna, “row” para indicar que es un encabezado de fila o “auto” para dejarlo a discreción del navegador. abbr: define una abreviatura para el contenido de la celda. sorted: indica si la columna o fila está ordenada. sortable: indica si la columna o fila se puede ordenar. sort-direction: indica la dirección de ordenamiento. sort-datatype: indica el tipo de datos a ordenar. Ejemplo Un ejemplo completo de uso de la etiqueta con varios atributos podría ser el siguiente:

Encabezado de la tabla
Fila 1, Columna 1	Fila 1, Columna 2
Fila 2, Columna 1	Fila 2, Columna 2

Lenguaje del código: HTML, XML (xml) En este ejemplo, se utiliza el atributo “scope” para especificar que esta celda es un encabezado de columna o fila. Se utiliza el atributo “colspan” para especificar que esta celda ocupa 2 columnas. Se usa el atributo “style” para especificar un estilo CSS personalizado (en este caso, para centrar el texto y cambiar el color de fondo).

La Etiqueta <th> en HTML caption

Nombre	Edad	Ciudad
Juan	30	Madrid
Maria	25	Barcelona

Encabezado de la tabla
Fila 1, Columna 1	Fila 1, Columna 2
Fila 2, Columna 1	Fila 2, Columna 2