Page 57 - Code & Click - 8
P. 57
Experiential Learning
Lab Activity 1
To create an HTML table.
1. Open Notepad and create the HTML document as shown below.
<!DOCTYPE html> 2. Open the HTML document in Microsoft Edge.
<html>
<head> <title> Hardware Devices </title> </head>
<body>
<table> <caption> Hardware Devices </caption>
<tr>
<th> Input Devices </th> <th> Output Devices
</th> <th> Storage Devices </th>
</tr>
<tr>
<td> Keyboard </td> <td> Monitor </td> <td>
Hard Disk </td>
</tr>
<tr>
<td> Mouse </td> <td> Printer </td> <td> SSD
</td>
</tr>
<tr>
<td> Webcam </td> <td> Plotter </td> <td>
Pen Drive </td>
</tr>
</table>
</body>
</html>
The various CSS properties associated with <table> tag are listed below.
Property Description Value(s) Syntax Example
border- Lets you specify separate (default) bordercollapse: border-
collapse whether collapse separate collapse:
or not table borders collapse
should be collapsed.
border-spacing Lets you specify the length (specifies borderspacing: border-spacing:
distance between the both the horizontal length 10px
borders of adjacent and vertical spacing.) border-spacing:
cells. length1 length2 5px 15px
caption-side Lets you specify the top (default), caption-side: caption-side:
placement of table bottom bottom bottom
caption.
empty-cells Lets you specify show (default) empty-cells: empty-cells:
whether to display hide hide hide
borders on
empty cells in a table.
width Lets you specify the value as percentage width: value width: 120%
width of a table. or in pixels width: 50px
height Lets you specify the value as percentage height: value height: 80%
height of a table. or in pixels height: 100px
55
