1 / 14

HTML Lists and Tables

HTML Lists and Tables. Mr. Rouda’s CSCI 101 sections. Web Expression Tutorial. New Folder. New File. Code View. Format of Every Page. <html> <head> <title> my page </title> </head> <body> this is the body </body> </html>. Lists. Unordered Lists Ordered Lists

dante
Download Presentation

HTML Lists and Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Lists and Tables Mr. Rouda’s CSCI 101 sections

  2. Web Expression Tutorial New Folder New File Code View

  3. Format of Every Page <html> <head> <title> my page </title> </head> <body> this is the body </body> </html>

  4. Lists • Unordered Lists • Ordered Lists • Definition Lists

  5. Lists - UnOrdered • List Example – UnOrdered - 1 • Here is a list of days. • <ul> • <li> monday </li> • <li> tuesday </li> • <li> wednesday </li> • </ul> • That is the end of the list.

  6. Lists - UnOrdered • List Example – UnOrdered - 2 • <ul> • <li> monday • <li> tuesday • <ul> • <li> Do Laundry • <li> Cut Grass • <li> Clean House • </ul> • <li> wednesday • </ul>

  7. Lists - Ordered • List Example – Ordered • change the ul’s to ol’s • <ol> • <li> monday </li> • <li> tuesday </li> • <li> wednesday </li> • </ol>

  8. Lists - Definition • Definition List • <dl> • <dt>Due Date: • <dd>Next Class • <dd>at 2:00pm • </dl>

  9. Tables • tables are grids of rows and columns • We fill in each cell row by row • Table Example – simple • <table> •  <tr> • <td> AAAAAAAAA • <td> BBB •  <tr> • <td> CCC • <td> DDD •  </table>

  10. Table • Table Example – adding some space • <table> • <tr> • <td> AAA • <td> &nbsp &nbsp &nbsp &nbsp • <td> BBB • <tr> • <td> CCC • <td> • <td> DDD • </table>

  11. Table • Table Example – border • <table border=10> • <table border=10 cellspacing=20 cellpadding=30>

  12. Table • Table Example – lines • <table rules=rows> • <table rules=cols> • <table rules=all>

  13. Table • Table Example - width • <table rules=all width=50%> • <tr> • <td width=25%> AAA • <td align=center> BBB • <tr> • <td> CCC • <td> DDD • </table>

  14. Next time • Talk about Paper • Images / Styles / CSS

More Related