Web Design Wikiclass | Tutorial / HTML and CSS: Table and List

Overview - This tutorial gives you a hands-on experience in coding HTML tables and lists, as well as using CSS to style tables and lists.

Note: We use a problem-solving approach to learn CSS. If you want a conventional approach to learn CSS, please go to CSS Tutorial by w3schools.com and spare some time (at home or during class) to study CSS Basic.

Activity 1: HTML Table

Make a HTML file that contains the following two tables

姓名	地區	地址	電話	註冊專科
洪秀治	沙田	新界沙田銀城街30-32號威爾斯親王醫院麻醉科	26322735	麻醉科
龐述俊	灣仔	香港銅鑼灣恩平道44-48號恩平中心1902室	22034483	骨科
陳子敬	中西區	香港中環德輔道中20號德成大廈702室	25221200	骨科
陳程達	油尖旺	九龍油麻地彌敦道363號恒成大廈1203室	23880233	骨科
陳焯雄	油尖旺	尖沙咀彌敦道132號美麗華大廈18樓1802室	23753323	血液及血液腫瘤科
區德璋	屯門	新界屯門青松觀路屯門醫院內科	24685389	腎病科
區兆寬	油尖旺	九龍佐敦彌敦道301-309號嘉賓商業大廈1012室	23323080	耳鼻喉科
區永華	油尖旺	九龍佐敦彌敦道301-309號嘉賓商業大廈605室	23323801	耳鼻喉科
歐銘鍇	油尖旺	九龍彌敦道655號15樓1509室	27879372	精神科
陳熾鴻	油尖旺	九龍彌敦道655號15樓1511室	27879372	精神科

World Regions	Population ( 2009 Est.)	Internet Users Dec. 31, 2000	Internet Users Latest Data	Penetration (% Population)	Growth 2000-2009
Africa	991,002,342	4,514,400	65,903,900	6.7 %	1,359.9 %
Asia	3,808,070,503	114,304,000	704,213,930	18.5 %	516.1 %
Europe	803,850,858	105,096,093	402,380,474	50.1 %	282.9 %
Middle East	202,687,005	3,284,800	47,964,146	23.7 %	1,360.2 %
North America	340,831,831	108,096,800	251,735,500	73.9 %	132.9 %
Latin America/Caribbean	586,662,468	18,068,919	175,834,439	30.0 %	873.1 %
Oceania / Australia	34,700,201	7,620,480	20,838,019	60.1 %	173.4 %
WORLD TOTAL	6,767,805,208	360,985,492	1,668,870,408	24.7 %	362.3 %

Reading for those who are not familiar with HTML table tags: HTML Tables - W3schools.com, HTML Tables – when and how to use tables in HTML
Remember not to mix presentation with content in your table markup.
Download Notepad2 or Notepad++ as the text editor for the exercise.
Remember to add an appropriate head section to your HTML. Here is an example:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>WD Tutorial 03 Activity 1</title>
      </head>

(Q1): Send your HTML code for this activity.

Activity 2: Style Tables with CSS

Use CSS to style the tables to make them look stylish and easy to read.

Reading: Top 10 CSS Table Designs - Smashing Magazine
(Q2): Send your CSS code for this activity.
(Q3): What you need to do on your previous HTML code in order to apply the CSS?

Activity 3: HTML Definition List

Add HTML code that contains the following definition list:

OUHK U123

Introduction to the Internet 國際網絡導論

OUHK U234

Web Sites Design 網頁設計

OUHK CT212

Network Programming and Design 網絡程式設計

Reading: Definition lists - misused or misunderstood?
(Q4): What is your HTML code for this activity?

Activity 4: Style Definition List with CSS

Use CSS to style the definition list to make them look as follows:

(Q5): What is your CSS code for this activity?

Activity 5: HTML List

Add HTML code that contains the following unorder list:

    <h2>Programme Code</h2>
    <ul>
      <li>BSCCEF1 – Year 1 entry of the BSc in Computer Engineering</li>
      <li>BSCCEF2 – Year 2 entry of the BSc in Computer Engineering</li>
      <li>BSCCEF3 – Year 3 entry of the BSc in Computer Engineering</li>
      <li>BSCHECEF1 – Year 1 entry of the BSc(Hons) in Electronic and Computer Engineering</li>
      <li>BSCHECEF2 – Year 2 entry of the BSc(Hons) in Electronic and Computer Engineering</li>
      <li>BSCHECEF3 – Year 3 entry of the BSc(Hons) in Electronic and Computer Engineering</li>
    </ul>

Activity 6: Style List with CSS

Use CSS to style the unorder list to make them look as follows:

Reading: CSS List - W3school.com
(Q6): What is your CSS code for this activity?

Submission

Please submit your work to Steven by email: sochoy@ouhk.edu.hk.
Please use SXXXXXXX - WD Tutorial 03 Submission as the email subject.
You may need to demonstrate your work to Steven in class. Steven may ask you some questions to test your knowledge.