close

Guide till formatering av listor och tabeller i CSS- Egenskaper och exempel

Formatering av listor och tabeller är en viktig del av att visa information på din webbplats. CSS tillhandahåller egenskaper och klasser för att skapa och anpassa listor och tabeller efter dina önskemål. Här är en detaljerad guide om hur man formaterar listor och tabeller i CSS.

 

Formatera listor

Oordnad lista(ul)

Huvudegenskap: list-stil-typ.

Värden: none, disc, circle, square.

Exempel:

ul {  
  list-style-type: disc;  
}

Beställd lista(ol)

Huvudegenskap: list-stil-typ.

Värden: inga(standard), decimal, nedre alfa, övre alfa, nedre romersk, övre romersk.

Exempel:

ol {  
  list-style-type: decimal;  
}

Definitionslista(dl)

Huvudegenskap: Det finns ingen specifik CSS-egenskap för att formatera definitionslistor. Du kan dock styla elementen i listan med klasser eller andra egenskaper som t.ex font-size, font-weight, margin, padding, etc.

Exempel:

<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;  
}

 

Formatera tabeller

Formatering av tabellstruktur

Huvudfastighet: border-collapse.

Värden: separate(default), collaps e.

Exempel:

table {  
  border-collapse: collapse;  
}

Formatering av tabellkant

Huvudfastighet: border.

Värden: Ett kantvärde, till exempel: 1px solid black.

Exempel:

table {  
  border: 1px solid black;  
}

Formatering av cellkant

Huvudfastighet: border.

Värden: Ett kantvärde, till exempel: 1px solid black.

Exempel:

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

Inriktning och avstånd mellan tabellceller

Huvudegenskaper: text-align, padding.

  • text-align: Justeringsvärden, till exempel: left, right, center.
  • utfyllnad: Mellanrumsvärde inom celler, till exempel: 10px.

Exempel:

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

Bakgrund och textfärg i tabeller

Huvudegenskaper: background-color, color

  • background-color: Bakgrundsfärgvärde, till exempel: lightgray.
  • color: Textfärgvärde, till exempel: white.

Exempel:

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

Kolumn- och radstorlek i tabeller

Huvudegenskaper: width, height.

  • width: Breddvärde, till exempel: "100px", "20%".
  • height: Höjdvärde, till exempel: "50px", "10%".

Exempel:

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

 

Det här är en omfattande guide om hur man formaterar listor och tabeller i CSS. Du kan anpassa värdena och egenskaperna för att skapa list- och tabellstilar som passar dina designbehov på din webbplats.