To design Tables and List on a HTML page

As we know HTML is a tag based language, so we can draw tables and List also using tags. In our blog today we will use various tags to do the same.

Code Explanation:

We start by giving heading and creating a table.

<h3> DEGIGNING OF TABLES AND LIST BOXES</h3>
<table width="200" border="1">
  <caption>
    TABLE 1
  </caption>
  <tr>
    <td height="40" colspan="2" align="center"><strong>TABLE TITLE</strong></td>
  </tr>
     <tr align="center">
     <td height="35"> COLUMN A </td>
     <td height="35">COLUMN B</td>
  </tr>
     <tr>
     <td align="center">DATA 1 </td>
     <td align="center">DATA 2 </td>
  </tr>
     <tr>
     <td align="center"> DATA 3</td>
     <td align="center"> DATA 4</td>
  </tr>
  <tr>
     <td align="center"> DATA 5</td>
     <td align="center"> DATA 6</td>
  </tr>
</table>

The above code creates something which displays like the following

DEGIGNING OF TABLES AND LIST BOXES

We can see in the above code that we have started by defining the tag table with a width of 200. There after we define the caption, no of columns and alignment. We then define respective table blocks with height and content.

Let us now create another table. We call it Table 2. We keep the Width as 400 and the border is 1.

<table width="400" border="1"><caption>TABLE 2</caption>
<tbody>
<tr>
<td colspan="2" align="center" height="40">TABLE TITLE</td>
</tr>
<tr align="center">
<td>COLUMN A</td>
<td>COLUMN B</td>
</tr>
<tr align="center">
<td>DATA 1</td>
<td>DATA 2</td>
</tr>
</tbody>
</table>

The Out put will be the following

Let us Conclude our the discussion on tables by creating another table with back ground color. The code will be like the following

<table width="209" border="1" align="left" bgcolor="#00FF00"><caption>TABLE 3</caption>
<tbody>
<tr>
<th width="101">COLUMN 1</th>
<th width="106">COLUMN 2</th>
</tr>
<tr>
<td>ROW 1 CELL 1</td>
<td>ROW 1 CELL 2</td>
</tr>
<tr>
<td>ROW 2 CELL 1</td>
<td>ROW 2 CELL 2</td>
</tr>
</tbody>
</table>

The output is like the following

Lists

We now write a code of list which displays some groceries in a list

<h4><strong>List 1</strong></h4>
<h3 align="center"><strong>Shopping List </strong></h3>
<ul>
	<li>Milk</li>
	<li>Toilet Paper</li>
	<li>cereal</li>
	<li>Bread</li>
</ul>

The Output is following of the un-ordered list. Please note the use of tag ul

List 1

Shopping List

• Milk
• Toilet Paper
• cereal
• Bread

Similarly an ordered list can be made using ol. See the code below

<h4><strong>List 2</strong></h4>
<h3 align="center"><strong>Goals </strong></h3>
<ol>
	<li>Find a Job</li>
	<li>Get Money</li>
	<li>Move Out</li>
	<li>Find a Partner</li>
</ol>

List 2

Goals

1. Find a Job
2. Get Money
3. Move Out
4. Find a Partner

Summary: By using Different type of tags we can draw different types of tables and list according to our requirement. We can change many attributes like background Color, Font Style etc.