CSS Lists and Tables
-
Upload
gerson-abesamis -
Category
Documents
-
view
1.761 -
download
4
description
Transcript of 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;}