Tables

Reading Time: 2 minutes

Designing Simple Tables

Design a HTML document that shows the classic states of matter along with examples in table format.

Classic States of Matter

In physics, a state of matter is one of the distinct forms in which matter can exist. Four states of matter are observable in everyday life.

State	Examples
Solid	Aluminium, Iron, Silicon, Wood
Liquid	Water, Magma, Mercury, Oil
Gas	Oxygen, Helium, Hydrogen, Nitrogen
Plasma	Found in Lightning, Ionosphere, Solar Wind, Stars

Solution

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Classic States of Matter</title>
</head>

<body>
  <h1>Classic States of Matter</h1>
  <p>
    In physics, a state of matter is one of the distinct forms in which matter can exist. Four states of matter are observable in everyday life.
  </p>

  <table>
    <tr>
      <th>State</th>
      <th>Examples</th>
    </tr>
    <tr>
      <td>Solid</td>
      <td>Aluminium, Iron, Silicon, Wood</td>
    </tr>
    <tr>
      <td>Liquid</td>
      <td>Water, Magma, Mercury, Oil</td>
    </tr>
    <tr>
      <td>Gas</td>
      <td>Oxygen, Helium, Hydrogen, Nitrogen</td>
    </tr>
    <tr>
      <td>Plasma</td>
      <td>Found in Lightning, Ionosphere, Solar Wind, Stars</td>
    </tr>
  </table>
</body>

</html>

Designing Tables with Images

Design a HTML document that shows the national symbols in India along with their description and image in table format.

National Symbols in India

National Identity Elements are intrinsic to the Indian identity and heritage. Indians of all demographics backgrounds across the world are proud of these National Symbols as they infuse a sense of pride and patriotism in every Indian's heart.

Name	Description	Symbol
Flag	Indian Flag
Emblem	Sarnath Lion Capital of Ashoka
Currency	Indian Rupee
Animal	Tiger
Bird	Peacock
Flower	Lotus
Tree	Banyan

Solution

<!DOCTYPE html>
<html lang="en">

<head>
  <title>National Symbols in India</title>
</head>

<body>
  <h1>National Symbols in India</h1>
  <p>
    National Identity Elements are intrinsic to the Indian identity and heritage. Indians of all demographics backgrounds across the world are proud of these National Symbols as they infuse a sense of pride and patriotism in every Indian's heart.
  </p>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Symbol</th>
      </tr>
    </thead>
    <tr>
      <th>Flag</th>
      <td>Indian Flag</td>
      <td><img src="/images/india/national-flag.jpg" height="75"></td>
    </tr>
    <tr>
      <th>Emblem</th>
      <td>Sarnath Lion Capital of Ashoka</td>
      <td><img src="/images/india/national-emblem.jpg" height="75"></td>
    </tr>
    <tr>
      <th>Currency</th>
      <td>Indian Rupee</td>
      <td><img src="/images/india/national-currency.jpg" height="75"></td>
    </tr>
    <tr>
      <th>Animal</th>
      <td>Tiger</td>
      <td><img src="/images/india/national-animal.jpg" height="75"></td>
    </tr>
    <tr>
      <th>Bird</th>
      <td>Peacock</td>
      <td><img src="/images/india/national-bird.jpg" height="75"></td>
    </tr>
    <tr>
      <th>Flower</th>
      <td>Lotus</td>
      <td><img src="/images/india/national-flower.jpg" height="75"></td>
    </tr>
    <tr>
      <th>Tree</th>
      <td>Banyan</td>
      <td><img src="/images/india/national-tree.jpg" height="75"></td>
    </tr>
  </table>
</body>

</html>