Scribd
Cargar
28 vistas7 páginas

Diseño de Tablas en HTML y CSS

El documento explica cómo crear y formatear tablas en HTML. Define las etiquetas <table>, <tr>, <td> y <th> para crear la estructura básica de una tabla y añadir contenido. También describe el uso de propiedades CSS como border, border-collapse, padding y text-align para controlar los bordes, espaciado y alineación. Finalmente, menciona los atributos colspan y rowspan para celdas que ocupen múltiples columnas o filas.

Cargado por

miriam solorzano
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
28 vistas7 páginas

Diseño de Tablas en HTML y CSS

El documento explica cómo crear y formatear tablas en HTML. Define las etiquetas <table>, <tr>, <td> y <th> para crear la estructura básica de una tabla y añadir contenido. También describe el uso de propiedades CSS como border, border-collapse, padding y text-align para controlar los bordes, espaciado y alineación. Finalmente, menciona los atributos colspan y rowspan para celdas que ocupen múltiples columnas o filas.

Cargado por

miriam solorzano
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Tablas

<table>
 Con la etiqueta <table> podemos definir una tabla.
 Cada fila se define con <tr>.
 El encabezado de la tabla se define con <th>.
 Y las celdas se definen con <td>.
 Dentro de un <td> puede haber cualquier tipo de elemento HTML,
textos, imágenes, listas, etc.
 

Añadir borde
Si no se especifica un borde para la tabla saldrá sin bordes por defecto.
Tenemos que usar la propiedad de CSS border.
 

Uniendo los bordes


Si queremos que unir los bordes de cada elemento para que solo haya un
borde y no se vea doble, podemos usar la propiedad border-collapse.
 

Añadir padding a las celdas


Si queremos dejar espacio entre el contenido de las celdas y el borde
podemos usar la propiedad padding de CSS.

 
Alinear a la izquierda los
encabezados
Por defecto los <th> se muestran en negrita y centrados. Si queremos
alinearlos a la izquierda podemos usar la propiedad de CSS text-align con
el valor left.

Añadir espacio entre los bordes


Podemos añadir espacio entre las celdas usando la propiedad de CSS
border-spacing.
 

Celdas que ocupan varias columnas


Tenemos el atributo colspan en el que podemos indicar el número de
columnas que ocupa esa celda.

 
Celdas que ocupan varias filas
Tenemos el atributo rowspan en el que podemos indicar el número de
filas que ocupa esa celda.

Añadir un título a la tabla


Podemos usar la etiqueta <caption> para añadir un título a la tabla.
 

Resumen
 Usamos <table> para definir una tabla
 Usamos <tr> para definir una fila en una tabla
 Usamos <td> para definir una celda de la tabla
 Usamos <th> para los encabezados de la tabla
 Usamos <caption> para ponerle un título
 Con la propiedad de CSS border podemos ponerle un borde
 Con la propiedad de CSS border-collapse podemos juntar los
bordes
 Con el padding de CSS podemos darle relleno a las celdas
 Con el text-align de CSS podemos alinear el texto de las celdas
 Con el border-spacing podemos setear espacio entre celdas
 El atributo colspan hace que una celda ocupe varias columnas
 El atributo rowspan hace que una celda ocupe varias filas

También podría gustarte