close

Guía para dar formato a listas y tablas en CSS- Propiedades y ejemplos

Dar formato a listas y tablas es una parte esencial de la visualización de información en su sitio web. CSS proporciona propiedades y clases para crear y personalizar listas y tablas a tu gusto. Aquí hay una guía detallada sobre cómo formatear listas y tablas en CSS.

 

Formateo de listas

Lista desordenada(ul)

Propiedad principal: tipo de estilo de lista.

Valores: none, disc, circle, square.

Ejemplo:

ul {  
  list-style-type: disc;  
}

Lista ordenada(ol)

Propiedad principal: tipo de estilo de lista.

Valores: ninguno(predeterminado), decimal, alfa inferior, alfa superior, romano inferior, romano superior.

Ejemplo:

ol {  
  list-style-type: decimal;  
}

Lista de definición(dl)

Propiedad principal: no existe una propiedad CSS específica para dar formato a las listas de definiciones. Sin embargo, puede diseñar los elementos dentro de la lista usando clases u otras propiedades como font-size, font-weight, margin, padding, etc.

Ejemplo:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>  

dt {  
  font-weight: bold;  
}

 

Formateo de tablas

Formato de estructura de tabla

Propiedad principal: border-collapse.

valores: separate(default), collaps e.

Ejemplo:

table {  
  border-collapse: collapse;  
}

Formato de borde de tabla

Propiedad principal: border.

Valores: un valor de borde, por ejemplo: 1px solid black.

Ejemplo:

table {  
  border: 1px solid black;  
}

Formato de borde de celda

Propiedad principal: border.

Valores: un valor de borde, por ejemplo: 1px solid black.

Ejemplo:

td, th {  
  border: 1px solid black;  
}

Alineación y espaciado de las celdas de la tabla

Propiedades principales: text-align, padding.

  • text-align: valores de alineación, por ejemplo: left, right, center.
  • relleno: Valor de espaciado dentro de las celdas, por ejemplo: 10px.

Ejemplo:

th {  
  text-align: center;  
  padding: 10px;  
}

Color de fondo y texto en tablas

Propiedades principales: background-color, color

  • background-color: valor del color de fondo, por ejemplo: lightgray.
  • color: valor del color del texto, por ejemplo: white.

Ejemplo:

table {  
  background-color: lightgray;  
  color: white;  
}

Tamaño de columna y fila en tablas

Propiedades principales: width, height.

  • width: Valor de ancho, por ejemplo: "100px", "20%".
  • height: Valor de altura, por ejemplo: "50px", "10%".

Ejemplo:

th {  
  width: 100px;  
  height: 50px;  
}

 

Esta es una guía completa sobre cómo formatear listas y tablas en CSS. Puede personalizar los valores y las propiedades para crear estilos de lista y tabla que se adapten a sus necesidades de diseño en su sitio web.