Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
css lists
and tables
More styling techniques
Styling lists

• You can change the appearance and the
  types of bullets (for unordered lists) and
  numbers (for ordered...
Speed test 01
1.   Rock
     •  Eraserheads
     •  Franco
     •  Urbandub
2.   Pop
     •  KC Concepcion
     •  Erik Sa...
Speed test 01
<ol>
<li>Rock<ul>
      <li>Eraserheads</li>
      <li>Franco</li>
      <li>Urbandub</li>
</ul></li>
<li>Po...
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

  l...
Speed test 02
i.   Rock
       Eraserheads
       Franco
       Urbandub
ii. Pop
           KC Concepcion
           Erik ...
Speed test 02
<ol>                              list-style-type:lower-roman;
<li>Rock<ul class=“rock” >        }
      <li...
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
  you...
Speed Test 03
Speed Test 03
<table>                     <tr>
<tr>                        	    <td>3</td>
	    <th>Rank</th>          	  ...
Styling tables
border: 1px solid black;
width:100%;
height:30px;
text-align:center;
vertical-align:center;
padding:5px;
ba...
borders
border-collapse:collapse;

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


border-left-width:thick;
b...
Borders
Speed Test 04
Speed Test 04

table {
border:2px solid black;
text-align:center;
}
Speed Test 05
Speed Test 05
td{
border-top:2px solid black;
}
th, td{
padding:10px;
}
Speed Test 06
Speed Test 06
table{
border-collapse:collapse;
}
th{
background-color:maroon;
color:white;
border-bottom:2px solid black;
}
Upcoming SlideShare
Loading in …5
×

CSS Lists and Tables

2,087 views

Published on

  • Be the first to comment

  • Be the first to like this

CSS Lists and Tables

  1. 1. css lists and tables More styling techniques
  2. 2. Styling lists • You can change the appearance and the types of bullets (for unordered lists) and numbers (for ordered lists)
  3. 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. 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. 5. List Properties • rule: ul {list-style-type:value;} none disc circle square
  6. 6. list properties • rule: ol {list-style-type:value;} decimal / decimal-leading-zero lower-alpha / upper-alpha lower-roman / upper-roman
  7. 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. 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. 9. List Properties • list-style- image:url(‘filename.gif’); • list-style-position:inside;
  10. 10. Styling Tables • Not much new rules • Appearance depends heavily on your selectors (which elements you will apply your rule to)
  11. 11. Speed Test 03
  12. 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. 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. 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. 15. Borders
  16. 16. Speed Test 04
  17. 17. Speed Test 04 table { border:2px solid black; text-align:center; }
  18. 18. Speed Test 05
  19. 19. Speed Test 05 td{ border-top:2px solid black; } th, td{ padding:10px; }
  20. 20. Speed Test 06
  21. 21. Speed Test 06 table{ border-collapse:collapse; } th{ background-color:maroon; color:white; border-bottom:2px solid black; }

×