1. css lists
and tables
More styling techniques

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

3. Speed test 01
1. Rock
• Eraserheads
• Franco
• Urbandub
2. Pop
• KC Concepcion
• Erik Santos
• Sexbomb Dancers
3. Hip-hop
• Andrew E
• Francis M
• Dice and K9

4. 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>

5. List Properties
• rule: ul {list-style-type:value;}
none
disc
circle
square

6. list properties
• rule: ol {list-style-type:value;}
decimal / decimal-leading-zero
lower-alpha / upper-alpha
lower-roman / upper-roman

7. Speed test 02
i. Rock
Eraserheads
Franco
Urbandub
ii. Pop
KC Concepcion
Erik Santos
Sexbomb Dancers
iii. Hip-hop
Andrew E
Francis M
Dice and K9

8. Speed test 02
<ol> list-style-type:lower-roman;
<li>Rock<ul class=“rock” > }
<li>Eraserheads</li>
<li>Franco</li> ul.rock{
<li>Urbandub</li> list-style-type:none;
</ul></li> }
<li>Pop<ul class=“pop” >
<li>KC Concepcion/li> ul.pop{
<li>Erik Santos</li> list-style-type:circle;
<li>Sexbomb Dancers</li> }
</ul></li>
<li>Hip-hop<ul class=“hiphop” > ul.hiphop{
<li>Andrew E</li> list-style-type:square;
<li>Francis M</li> }
<li>Dice and K9</li>
</ul></li>
</ol>
ol{

9. List Properties
• list-style-
image:url(‘filename.gif’);
• list-style-position:inside;

10. Styling Tables
• Not much new rules
• Appearance depends heavily on your
selectors (which elements you will apply
your rule to)

11. Speed Test 03

12. Speed Test 03
<table> <tr>
<tr> <td>3</td>
<th>Rank</th> <td>Caloocan</td>
<th>City</th> <td>1,378,856</td>
<th>Population</th> </tr>
</tr> <tr>
<tr> <td>4</td>
<td>1</td> <td>Davao City</td>
<td>Quezon City</td> <td>1,363,337</td>
<td>2,679,450</td> </tr>
</tr> <tr>
<tr> <td>5</td>
<td>2</td> <td>Cebu City</td>
<td>Manila</td> <td>798,809</td>
<td>1,660,714</td> </tr>
</tr> </table>

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

14. borders
border-collapse:collapse;
border-width:3px;
border-style:dashed;
border-color:green;
border-left-width:thick;
border-bottom-style:solid;
border-right-color:blue;

15. Borders

16. Speed Test 04

17. Speed Test 04
table {
border:2px solid black;
text-align:center;
}

18. Speed Test 05

19. Speed Test 05
td{
border-top:2px solid black;
}
th, td{
padding:10px;
}

20. Speed Test 06

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