Está definido por las
etiquetas <table> y </table>. Las filas son creadas por las
etiquetas <tr> y </tr> y las celdas son creadas por las etiquetas
<td> y </td>, las etiquetas de cierre no son obligatorias pero te
aconsejo que siempre cierres cada elemento con su respectiva etiqueta. Y
opcionalmente podemos crear columnas con las etiquetas <td> y </th>
salida
Una tabla puede tener
un ancho width="100%" , 100% de la pantalla o pixeles
Y el
border="1" es la raya que bordea a la tabla, puedes ponerle otro
numero
Un elemento table
actúa únicamente como el contenedor donde otros elementos pueden ser
declarados. Estos elementos son:
caption: Provee un
título para la tabla.
<table>
<caption>
Titulo de la Tabla </caption>
…..
</table>
colgroup: agrupa
columnas temáticamente.
col: aplica atributos
comunes y estilos a una o más columnas. Sólo puede ser declarado como hijo de
colgroup.
tbody: representa a
un cuerpo de la tabla.
thead: representa la
sección de encabezado de la tabla.
tfoot: representa la
sección de pie de la tabla.
tr: representa una
fila. Puede ser declarado como hijo de tbody, thead, tfoot o table.
td: representa a una
celda regular. Sólo puede ser declarado como hijo de tr.
th: representa a una
celda de encabezado. Sólo puede ser declarado como hijo de tr.
Atributos
Atributo
|
Valor
|
Descripción
|
No soportados en HTML5
|
||
align
|
left
center
right
|
Especifica la
alineación de una tabla según el texto circundante.
|
width
|
pixels
%
|
Especifica el ancho
de una tabla.
|
bgcolor
|
rgb(x,x,x)
#xxxxxx
colorname
|
Especifica un color de fondo de una tabla.
|
border
|
1
0
|
Especifica si será visible un borde alrededor de la
tabla y de las celdas.
|
frame
|
void
above
below
hsides
lhs
rhs
vsides
box
border
|
Especifica qué partes de los bordes de la tabla
externas que deben ser visibles.
|
cellpadding
|
Pixeles
|
Especifica el espacio, en píxeles, entre la pared de
la celda y el contenido de la celda.
|
cellspacing
|
pixeles
|
Especifica el espacio, en píxeles, entre las celdas.
|
rules
|
none
groups
rows
cols
all
|
Especifica qué partes de los bordes interiores que
deben ser visibles.
|
summary
|
text
|
Especifica un resumen del contenido de una tabla.
El atributo resumen no tiene ningún efecto visual en
los navegadores web normales, pero puede ser utilizado por los lectores de
pantalla.
|
Se debe usar CSS en
su lugar
Ejemplo
<table
width="100%" border="1">
<tr><!--Fila 1-->
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr><!--Fila 2-->
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
</table>
Visualizamos
En cambio
<!doctype
html>
<html>
<head>
<meta
charset="utf-8">
<title>Tablas</title>
</head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width:100%
}
</style>
<body>
<table>
<tr><!--Fila 1-->
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr><!--Fila 2-->
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
</table>
</body>
</html>
Visualizamos
Visualizamos lo mismo
pero hecho de la manera correcta, según las nuevas reglas de HTML5 con un código
más limpio
Diferencia td y th
Diferencia td y th
