Scribd
Upload
242 views

Practical 3: Chapter 5 Table Section A: Lab Exercise (Compulsory)

The document provides instructions and specifications for creating two tables using HTML and CSS. Section A lists exercises from the Practical 3 PDF document. Section B includes two questions that provide the specifications for creating tables shown in Figure 1 and Figure 2, including styling the tables with borders, backgrounds, text alignment and identifying table elements. Code is provided as the response for creating each table according to the given specifications.

Uploaded by

LEE JUN WEI
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
242 views

Practical 3: Chapter 5 Table Section A: Lab Exercise (Compulsory)

The document provides instructions and specifications for creating two tables using HTML and CSS. Section A lists exercises from the Practical 3 PDF document. Section B includes two questions that provide the specifications for creating tables shown in Figure 1 and Figure 2, including styling the tables with borders, backgrounds, text alignment and identifying table elements. Code is provided as the response for creating each table according to the given specifications.

Uploaded by

LEE JUN WEI
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Practical 3: Chapter 5 Table

Section A:
Lab Exercise (Compulsory)
Page : Practical 3PDF- 489 to 490 (Chapter 5 Table)
Exercise (s): Review Assignments (Tutorial 6)

Page : Practical 3PDF- 422 to 425 (Chapter 5 Table – different design for different
device)
Exercise (s): Review Assignments (Tutorial 5)

Additional Lab Exercise (Optional)


Page : Practical 3 PDF- 491 to 492 (Chapter 5 Table)
Exercise (s): Case Problem 1 (Tutorial 6)

Section B:
Question 1

Use HTML code and embedded styles sheet to create the table in Figure 1 with the following
specifications:

Figure 1
Specifications:
● The table takes up 50% of the display area. Create separate borders for table border and cell
border.
● Set the table border to red color , 2-pixel width and solid border style.
● Set the cell border to grey colour, 1-pixel width and solid border style.
● Set the space between cell border and cell text to 5 pixels.
● Mark the first two rows and the first column of the table as the table heading cells.
● Insert inline styles into the first row, set the background colour to black and text colour to
white.

● <!DOCTYPE html>
● <html>

Page 1
●     <head>
●         <title><Section>BQ1</Section></title>
●         <style>
●             table{
●                 width:50%;
●             }
●             table,th,td{
●                 border-collapse:separate;
●             }
●             table{
●                 border:2px solid red;
●             }
●             th,td{
●                 border:1px solid grey;
●             }
●             th,td{
●                 padding:5px;
●             }
●         </style>
●     </head>
●     <body>
●         <table class= "Figurel">
●             <tr style="background-color:black; color:white">
●                 <th colspan= "3">30 August 2019</th>
●             </tr>
●             <tr>
●                 <th>Cinema</th>
●                 <th>Movies</th>
●                 <th>Showtimes</th>
●             </tr>
●             <tr>
●                 <th rowspan= "3">GSC KL Pavillion</th>
●                 <td rowspan= "2">Fast & Furious</td>
●                 <td>7-9pm Hall 1</td>
●             </tr>
●             <tr>
●                 <td>9-11pm Hall 2</td>
●             </tr>
●             <tr>
●                 <td>Angel Has Fallen</td>
●                 <td>7-9pm Hall 3</td>
●             </tr>
●         </table>
●     </body>
● </html>

Page 2
Question 2

Use HTML and CSS code to create the table in Figure 2 with the following specifications

Figure 2

Specifications:
● Identify the <thead><tbody> and </tfoot> element.
● Centralized the text within the table.
● Set the table width to 80% of the window.
● Set the table border to 2 pixels.
● Make the first row and last row as table headings.
● Set the background colour of the first row and last row to pink colour.

● <!DOCTYPE html>
● <html>
●     <head>
●         <title><Section>BQ2</Section></title>
●         <style>
●             table{
●                 text-align: center;
●                 width:80%;
●                 border:2px black;
●             }
●             th,td{
●                 border:1px solid grey;
●             }
●         </style>

Page 3
●     </head>
●     <body>
●         <table class= "Figure2">
●             <thead>
●                 <tr style="background-color:pink">
●                     <th>TEAM</th>
●                     <th>NAME</th>
●                     <th>SALES</th>
●                 </tr>
●             </thead>
●             <tfoot>
●                 <tr style="background-color:pink">
●                     <th colspan="2">TOTAL SALES</th>
●                     <th>11000</th>
●                 </tr>
●             </tfoot>    
●             <tbody>
●                 <tr>
●                     <th rowspan="3">A</th>
●                     <td>STEVEN</td>
●                     <td>2000</td>
●                 </tr>
●                 <tr>   
●                     <td>SUSI</td>
●                     <td>500</td>
●                 </tr>
●                 <tr>
●                     <td>SANDY</td>
●                     <td>3000</td>
●                 </tr>
●                     <th rowspan="2">B</th>
●                     <td>GARY</td>
●                     <td>1500</td>
●                 </tr>
●                 <tr>
●                     <td>GORILLA</td>
●                     <td>4000</td>
●                 </tr>
●             </tbody>
●         </table>
●     </body>
● </html>

Page 4

You might also like