Las celdas <th>
Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos atributos que las etiquetas <td> y
funcionan de la misma forma, salvo que el contenido que esté dentro de una etiqueta <th> está considerado como el
encabezado de la tabla, por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.
Las celdas <tr>
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El
contenido de las columnas que están dentro de la fila lo podemos alínear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo “valign” para poder alinearlo arriba de la celda (“top”), en el centro (“middle”)
o debajo (“bottom”).
Para alinearlo horizontalmente utilizaremos el atributo “align”. Con este atributo podremos alinear el contenido de las celdas en
el centro (“center”), a la izquierda (“left”), a la derecha (“right”) o justificado (“justify”).
Por supuesto a las filas también les podemos definir el color de fondo (“bgcolor”) y el color del borde (“bordercolor”).
El siguiente ejemplo representa a una tabla (table) con un encabezado (thead) y un cuerpo (tbody). Las filas de esta tabla,
representadas por el elemento tr, se encuentran presentes en ambos contenedores descriptos anteriormente y contienen a un número de
tres celdas cada una.
<table class="egt">
<thead>
<tr>
<th>Película</th>
<th>Recaudación</th>
<th>Año</th>
</tr>
</thead>
<tbody>
<tr>
<td>Avatar</td>
<td>$2,787,965,087</td>
<td>2009</td>
</tr>
<tr>
<td>Titanic</td>
<td>$2,186,772,302</td>
<td>1997</td>
</tr>
<tr>
<td>The avengers</td>
<td>$1,518,594,910</td>
<td>2012</td>
</tr>
</tbody>
</table>
Película Recaudación Año
Avatar $2,787,965,087 2009
Titanic $2,186,772,302 1997
The avengers $1,518,594,910 2012
Atributos
id (name)
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a
este elemento en otras instancias (por ejemplo, desde un script del lado cliente).
<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>
class (cdata)
El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con
hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.
Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el
anterior.</p>
style (style)
Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de
hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos,
relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu
documento.
Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".
<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>
title (text)
El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento.
Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un
pequeño período de tiempo.
Código
<a title="HTML" href="[Link] HTML</a>
Vista
Código HTML
lang (langcode)
Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".
Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de
estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido
completamente reemplazado por "xml:lang" y su uso ya no es válido.
<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>
dir
Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene
dos valores posibles que son insensibles a mayúsculas/minúsculas:
RTL: derecha a izquierda.
LTR: izquierda a derecha.
<q lang="he" dir="rtl">...una cita en Hebreo...</q>
align
Establece la alineación para el texto dentro de una celda en la fila. Puede tomar uno de los siguientes valores insensibles a mayúsculas/minúsculas:
left: la información es alineada a la izquierda. Este es el valor por defecto para las celdas comunes (tag HTML td).
center: la información es centrada. Este es el valor por defecto para las celdas de encabezado (tag HTML th).
right: la información es alineada a la derecha.
justify: la información es justificada, es decir, alineada a ambos márgenes.
char: el texto es alineado según un carácter específico. se utiliza junto con el atributo "char".
<tbody align="center">
valign
Establece la alineación vertical para el texto dentro de una celda en la fila. Puede tomar uno de los siguientes valores insensibles a
mayúsculas/minúsculas:
top: la información es alineada a la margen superior.
middle: la información es centrada verticalmente.
bottom: la información es alineada a la margen inferior.
baseline: todas las celdas en una fila que contengan esta alineación deberían tener su primera línea de texto en una base común.
<tbody valign="top">
char (character)
Especifica un carácter que actuará como eje para la alineación del texto. Para que este valor sea considerado, el atributo "align" debe presentar el valor
"char".
Nota que a los navegadores no se les requiere soporte para este atributo. Esto, sumado a su naturaleza presentacional, constituye una buena razón
para no confiar en el.
<tbody align="char" char=".">
charoff (length)
Especifica un desplazamiento para el carácter de alineación (primera aparición) en cada línea. La dirección del texto, establecida con el atributo "dir",
debe ser tenida en cuenta a la hora de decidir cuál será la primera aparición.
Nota que a los navegadores no se les requiere soporte para este atributo. Esto, sumado a su naturaleza presentacional, constituye una buena razón
para no confiar en el.
<tbody align="char" char="." charoff="1">
bgcolor (color)
Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
Define el color que será usado como fondo de todas las celdas dentro de una fila.
<tr bgcolor="green">
Eventos
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onkeypress
onkeydown
onkeyup
Etiqueta HTML <td>
Definición y uso
La etiqueta <td> define una celda estándar en una tabla HTML.
Una tabla HTML tiene dos tipos de celdas:
Celdas de encabezado: contiene información de encabezado (creada con el elemento <th> )
Celdas estándar: contiene datos (creados con el elemento <td>)
El texto en los elementos <th> está en negrita y centrado por defecto.
El texto en los elementos <td> es regular y está alineado a la izquierda de manera predeterminada.
Atributos de la etiqueta HTML <td>
Nombre
del Valores Notas
Atributo
<td
NOWRAP indica que el texto no debe ajustarse en la celda.
nowrap>
<td bgcolor
Establece el color de fondo de una sola celda en una tabla.
= "">
<td
bordercolor Establece el color de todo el borde alrededor de una celda.
= "">
<td
background Especifica la URL de un archivo de imagen que se utilizará como imagen de fondo del elemento <td>.
= "">
<td colspan
Indica cuántas columnas debe ocupar una celda.
= "">
<td align = Se utilizó para especificar la alineación del contenido de una celda de datos de una sola tabla. Este atributo ha quedado en desuso. Use
""> CSS para controlar la alineación del contenido de una celda de datos de la tabla.
<td ancho Se usó para establecer el ancho de una celda de datos de la tabla en un valor que anularía el ancho predeterminado. Este atributo ha
= ""> quedado en desuso. Use CSS para controlar el diseño de las celdas de datos en las tablas HTML.
Read more: [Link]