CSS Lists and Tables

css lists and tablesMore styling techniques

Styling lists

• You can change the appearance and the types of bullets (for unordered lists) and numbers (for ordered lists)

Speed test 011. Rock

• Eraserheads

• Franco

• Urbandub2. Pop

• KC Concepcion

• Erik Santos

• Sexbomb Dancers3. Hip-hop

• Andrew E

• Francis M

• Dice and K9

Speed test 01<ol><li>Rock<ul>

<li>Eraserheads</li><li>Franco</li><li>Urbandub</li>

</ul></li><li>Pop<ul>

<li>KC Concepcion/li><li>Erik Santos</li><li>Sexbomb Dancers</li>

</ul></li><li>Hip-hop<ul>

<li>Andrew E</li><li>Francis M</li><li>Dice and K9</li>

</ul></li></ol>

List Properties

• rule: ul {list-style-type:value;}

none

disc

circle

square

list properties

• rule: ol {list-style-type:value;}

decimal / decimal-leading-zero

lower-alpha / upper-alpha

lower-roman / upper-roman

Speed test 02i. Rock

EraserheadsFrancoUrbandub

ii. PopKC ConcepcionErik SantosSexbomb Dancers

iii. Hip-hopAndrew EFrancis MDice and K9

<ol><li>Rock<ul class=“rock” >

<li>Eraserheads</li><li>Franco</li><li>Urbandub</li>

</ul></li><li>Pop<ul class=“pop” >

<li>KC Concepcion/li><li>Erik Santos</li><li>Sexbomb Dancers</li>

</ul></li><li>Hip-hop<ul class=“hiphop” >

<li>Andrew E</li><li>Francis M</li><li>Dice and K9</li>

</ul></li></ol>ol{

list-style-type:lower-roman;}

ul.rock{list-style-type:none;}

ul.pop{list-style-type:circle;}

ul.hiphop{list-style-type:square;}

Speed test 02

List Properties

• list-style-image:url(‘filename.gif’);

• list-style-position:inside;

Styling Tables

• Not much new rules

• Appearance depends heavily on your selectors (which elements you will apply your rule to)

Speed Test 03

Speed Test 03<table><tr> <th>Rank</th> <th>City</th> <th>Population</th></tr><tr> <td>1</td> <td>Quezon City</td> <td>2,679,450</td></tr><tr> <td>2</td> <td>Manila</td> <td>1,660,714</td></tr>

<tr> <td>3</td> <td>Caloocan</td> <td>1,378,856</td></tr><tr> <td>4</td> <td>Davao City</td> <td>1,363,337</td></tr><tr> <td>5</td> <td>Cebu City</td> <td>798,809</td></tr></table>

Styling tablesborder: 1px solid black;width:100%;height:30px;text-align:center;vertical-align:center;padding:5px;background-color:dimgray;color:black;

bordersborder-collapse:collapse;

border-width:3px;border-style:dashed;border-color:green;

border-left-width:thick;border-bottom-style:solid;border-right-color:blue;

Borders

Speed Test 04

Speed Test 04

table {border:2px solid black;text-align:center;}

Speed Test 05

Speed Test 05td{border-top:2px solid black;}

th, td{padding:10px;}

Speed Test 06

Speed Test 06table{border-collapse:collapse;}th{background-color:maroon;color:white;border-bottom:2px solid black;}