Create a Professional Frame for a Webpage Using HTML Codes [HTML 04]

In the previous post I have shown how to create a table and how to define height, width & alignment. Now I will show how to create expected numbers of rows & columns and how to customize the cells of a table.

---

<table border="1" width="100%" height="700px" align="center">
<tbody>
<tr>
<td>C1R1</td><td>C2R1</td>
</tr>
<tr>
<td>C1R2</td><td>C2R2</td>
</tr>
</tbody>
</table>

---

The above codes are to create a table of two rows and two columns. But we will create a table of six columns and five rows. And later we will form an attractive webpage by it. That's why we have to add four more rows and three more columns. So the codes will be...

---

<table border="1" width="100%" height="700px" align="center">
<tbody>
<tr>
<td>C1R1</td><td>C2R1</td><td>C3R1</td><td>C4R1</td><td>C5R1</td><td>C6R1</td>
</tr>
<tr>
<td>C1R2</td><td>C2R2</td><td>C3R2</td><td>C4R2</td><td>C5R2</td><td>C6R2</td>
</tr>
<tr>
<td>C1R3</td><td>C2R3</td><td>C3R3</td><td>C4R3</td><td>C5R3</td><td>C6R3</td>
</tr>
<tr>
<td>C1R4</td><td>C2R4</td><td>C3R4</td><td>C4R4</td><td>C5R4</td><td>C6R4</td>
</tr>
<tr>
<td>C1R5</td><td>C2R5</td><td>C3R5</td><td>C4R5</td><td>C5R5</td><td>C6R5</td>
</tr>
</tbody>
</table>

---

Look, the newly added codes are ashed colored. Add the above codes into the body sections of the .html page you created in the previous post. Then you will get a table of six columns and five rows.
<tr>
<td>C1R1</td><td>C2R1</td><td>C3R1</td><td>C4R1</td><td>C5R1</td><td>C6R1</td>
</tr>

The above codes are for the first row. So there are also six cells. But we will merge the first two cells and the last four cells. So the above codes will be...
<tr>
<td colspan="2">C1R1&C2R1</td><td colspan="4">C3R1+C4R1+C5R1+C6R1</td>
</tr>

Again we will merge all the cells of the third row. But the third row will remain the same. So the codes will be...
<tr>
<td colspan="6">C1R3+C2R3+C3R3+C4R3+C5R3+C6R3</td>
</tr>

Now we will merge the first five cells of the fourth row. So the codes will be...
<tr>
<td colspan="5">C1R4+C2R4+C3R4+C4R4+C5R4</td><td>C6R4</td>
</tr>

Finally will merge the all cells of the fifth row. That's why the codes will look like...
<tr>
<td colspan="6">C1R5+C2R5+C3R5+C4R5+C5R5+C6R5</td>
</tr>

However, all the codes for the table will look like the codes given below. In this step we will avoid the height="700px" attribute of <table> tag. When you will save your webpage with these codes then you will get a table as given below the codes.

---

<table border="1" width="100%" align="center">
<tbody>
<tr>
<td colspan="2">C1R1&C2R1</td><td colspan="4">C3R1+C4R1+C5R1+C6R1</td>
</tr>
<tr>
<td>C1R2</td><td>C2R2</td><td>C3R2</td><td>C4R2</td><td>C5R2</td><td>C6R2</td>
</tr>
<tr>
<td colspan="6">C1R3+C2R3+C3R3+C4R3+C5R3+C6R3</td>
</tr>
<tr>
<td colspan="5">C1R4+C2R4+C3R4+C4R4+C5R4</td><td>C6R4</td>
</tr>
<tr>
<td colspan="6">C1R5+C2R5+C3R5+C4R5+C5R5+C6R5</td>
</tr>
</tbody>
</table>

---

Result of the above codes

C1R1&C2R1		C3R1+C4R1+C5R1+C6R1
C1R2	C2R2	C3R2	C4R2	C5R2	C6R2
C1R3+C2R3+C3R3+C4R3+C5R3+C6R3
C1R4+C2R4+C3R4+C4R4+C5R4					C6R4
C1R5+C2R5+C3R5+C4R5+C5R5+C6R5

The above table is the main frame for the webpage we are going to create.

<< Prev

Next >>