Show:
Ordered & Unordered Lists
Basic Tables
Advanced Table Coding
Text Styling
Debugging Round
100

Write the HTML code to create an unordered list with:

  • Apple
  • Banana
  • Mango

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

100

Create a table with 2 rows and 2 columns.

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

100

Create a cell that spans 2 columns.

<td colspan="2">Merged Cell</td>

100

Make a paragraph text red using inline CSS.

<p style="color: red;">Hello</p>

100

Fix this code:

<tr>
<td>Name
<td>Age</td>
</tr>

<tr>
  <td>Name</td>
  <td>Age</td>
</tr>

200

Create an ordered list starting from 3 with:

  • Red
  • Blue
  • Green

<ol start="3">
  <li>Red</li>
  <li>Blue</li>
  <li>Green</li>
</ol>

200

Create a table with a heading row:
Name | Age

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

200

Create a cell that spans 2 rows.

<td rowspan="2">Merged Row</td>

200

Change font to Arial.

<p style="font-family: Arial;">Hello</p>

200

Fix:

<ol>
<li>One
<li>Two
</ol>

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

300

Create an ordered list using uppercase letters (A, B, C).

<ol type="A">
  <li>Math</li>
  <li>Science</li>
  <li>English</li>
</ol

300

Create a table with caption “Class List”.

<table border="1">
  <caption>Class List</caption>
  <tr>
    <td>Sample</td>
  </tr>
</table>

300

Create a table with:

  • Border = 1
  • Cellpadding = 10
  • Cellspacing = 5

<table border="1" cellpadding="10" cellspacing="5">
</table>

300

Make text size 25px.

<p style="font-size: 25px;">Hello</p>

300

Fix:

<table border=1>

<table border="1">

400

Create a nested list:

Subjects

  • ICT
  • Math
    • Algebra
    • Geometry

<ul>
  <li>ICT</li>
  <li>Math
    <ul>
      <li>Algebra</li>
      <li>Geometry</li>
    </ul>
  </li>
</ul>

400

Create a table row with 3 cells where the middle cell is empty but visible.

<tr>
  <td>One</td>
  <td> </td>
  <td>Three</td>
</tr>

400

Create a table with background color yellow.

<table border="1" bgcolor="yellow">
</table>

400

Make text blue, font Arial, size 20px.

<p style="color: blue; font-family: Arial; font-size: 20px;">
Hello
</p>

400

Fix:

<td colspan=2>Data</td>

<td colspan="2">Data</td>

500

Create a description list for:

HTML – HyperText Markup Language
CSS – Cascading Style Sheets

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

500

Create a table centered on the page with width 60% and border 2.

<table border="2" width="60%" align="center">
</table>

500

Create a full table with:

Header row: ID | Name | Marks
2 data rows

<table border="1">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Ana</td>
    <td>85</td>
  </tr>
  <tr>
    <td>102</td>
    <td>Ben</td>
    <td>90</td>
  </tr>
</table>

500

Write full HTML page with:

  • Page margin 30px
  • Text color green

<html>
<head>
<style>
body {
  margin: 30px;
  color: green;
}
</style>
</head>
<body>

<p>Welcome</p>

</body>
</html>

500

Fix all errors:

<table border=1 width=50% align=center>
<tr>
<th>Name<td>Marks</td>
<tr>
<td>Anna<td>90
</table>

<table border="1" width="50%" align="center">
<tr>
  <th>Name</th>
  <th>Marks</th>
</tr>
<tr>
  <td>Anna</td>
  <td>90</td>
</tr>
</table>