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
TABLE TITLE | |
COLUMN A | COLUMN B |
DATA 1 | DATA 2 |
DATA 3 | DATA 4 |
DATA 5 | DATA 6 |
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
TABLE TITLE | |
COLUMN A | COLUMN B |
DATA 1 | DATA 2 |
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
COLUMN 1 | COLUMN 2 |
---|---|
ROW 1 CELL 1 | ROW 1 CELL 2 |
ROW 2 CELL 1 | ROW 2 CELL 2 |
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
- Find a Job
- Get Money
- Move Out
- 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.