Cómo hacer tablas en CSS

Escrito por brandy alexander | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer tablas en CSS
Crear tablas utilizando Hojas en Estilo en Cascadas (CSS, por sus siglas en inglés) es una forma avanzada de mostrar datos. (David De Lossy/Photodisc/Getty Images)

Crear tablas utilizando Hojas en Estilo en Cascadas (CSS, por sus siglas en inglés) es una forma avanzada de mostrar datos o crear un diseño de página. CSS te permite crear un código más limpio, que se traduce en cargas de página más rápidas y te permite crear más de una tabla personalizada. Utilizando una lista desordenada HTML simple, CSS asigna las reglas de estilo a cada elemento para definir la forma de mostrar la tabla y presentar el contenido. Las reglas de estilo pueden ser hechas a la medida para permitirte crear todo tipo de tablas, desde lo simple a lo complejo.

Otras personas están leyendo

Necesitarás

  • Un editor de texto HTML, como BBEdit o Dreamweaver

Lista completaMinimizar

Instrucciones

    Código CSS

  1. 1

    Abre un nuevo documento en un editor de texto HTML, como BBEdit o Dreamweaver.

  2. 2

    Crea un regla de estilo de clase llamada ".table". Esta regla define el tipo de letra de la tabla. Por ejemplo: .table { font-family: Verdana, Arial, Helvetica, sans.serif; }

  3. 3

    Crea una regla de estilo de clase llamada ".table ul". Esta regla define el margen, el relleno, el flotador y el borde de lista desordenada. Por ejemplo: .table ul { margin: 0px; padding: 0px; float: left; border-top: 0px none; }

  4. 4

    Crea una regla de estilo de clase llamada ".table ul li". Esta regla define el relleno, el tipo de estilo de lista, el tamaño del tipo de letra, el borde inferior, el ancho de la tabla y el color de fondo del elemento de lista. Por ejemplo: .table ul li { padding: 5px 5px 10px 10px; list-style-type: none; background-color: #CCCCFF; font-size: 14px; border-bottom: 1px solid #FFFFFF; width: 150px: color: #000033; }

  5. 5

    Crea una regla de estilo de clase llamada ".table ul li.heading". Esta regla define las propiedades del tipo de letra, el color de fondo y el borde inferior del encabezamiento de lista. Por ejemplo: .table ul li.heading { font-weight: bold; color: #333366; background-color: #9999CC; text-transform: uppercase; font-size: 16px; border-bottom: 1px solid #FFFFFF; }

  6. 6

    Nombra y guarda el archivo CSS con la extensión .css.

  7. 7

    Une tu archivo CSS con HTML, abre un documento HTML y agrega un enlace dentro del elemento "head" del documento. Por ejemplo: <link href="http://www.yoursite.com/table.css" rel="stylesheet" type="text/css" media="all" />

    Código HTML

  1. 1

    Ingresa la etiqueta de apertura "<div>" y añade la regla de clase "table". Esto asigna el estilo de la tabla. Por ejemplo: <div class="table">

  2. 2

    Ingresa la etiqueta de apertura de lista desordenada "<ul>", la que dará comienzo a la primer columna de la tabla.

  3. 3

    Ingresa la etiqueta de elemento de lista "<li>" y agrega la regla de clase "headings". Esto asigna el estilo de encabezamiento de lista. Por ejemplo: <li class="headings">

  4. 4

    Ingresa el texto del elemento de lista y cierra la etiqueta "</li>". El texto es el primer encabezamiento de la columna. Por ejemplo: <li class="headings"> Columna 1 </li>

  5. 5

    Ingresa todas las etiquetas de elemento de lista que necesites. El texto ingresado en estos elementos de listas es la información que aparece bajo la columna uno. Por ejemplo: <li> Row 1, Column 1 </li> <li> Row 2, Column 1 </li> <li> Row 3, Column 1 </li>

  6. 6

    Ingresa la etiqueta de cierre "</ul>" para completar la primera columna de la tabla.

  7. 7

    Repite los pasos dos, tres y cuatro para agregar columnas y filas adicionales a la tabla, si es necesario. Por ejemplo: <ul> <li class="heading">Column 2</li> <li>Row 1, Column 2</li> <li>Row 2, Column 2</li> <li>Row 3, Column 2</li> </ul>

  8. 8

    Ingresa la etiqueta de cierre "</div>".

  9. 9

    Nombra y guarda el archivo HTML con la extensión ".html"·

Consejos y advertencias

  • Puedes agregar especificaciones adicionales de estilo, como el tamaño o color del tipo de letra, en cada regla CSS. Si no ves que las reglas CSS estén funcionando, asegúrate de que ambos archivos se han guardado y luego utiliza la función "Actualizar" del editor de texto HTML.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles