Translated by Google Translate

HTML for Beginners, How Table Make Layout (Web Design)

11:26 PM Posted by h


Many people says that HTML stands for Hyper Text Markup Language. But I have my own stands for HTML. In my experience when I begn autodidactiong HTML I learn how to make the layout. And I find the simple way to design the layout is using table tags. If you looking the web layout without fill (color and picture), you will got it. Look at the table below :

Table 1.  6 colomn and 8 rows
1/A B C D E F
2
3
4
5
6
7
8

The picture 1 shows the simple table that has 6 colomns and 8 rows. Let's make a little changing. Look at the table 2 below.

Table 2. Modify from Table 1
HEADER
LEFT SIDEBAR

In table 2, I merge all cells in the first row, so I name it Header. And then I merge 2 colomn (A, B) from second row until last row (2 - 8) and I name it Left Sidebar. After here we have build a simple layout from changing the table.

Now we try fill that table with color. Look at the table 3 below for the result

Table 3. Fill the color the table 2
HEADER
LEFT SIDEBAR
In Header I fill that with Rubber Ducky Yellow color, and In the Left Sidebar I fill that with Yellow. After here we have built a simple HTML Website. Try to modified this table with your own style. For source code you can copy the code below:

<table>
<tbody>
<tr>
<td><table align="center" border="1">
<tbody>
<tr>
<td height="40" style="text-align: center;" width="70">1/A</td>
<td height="40" style="text-align: center;" width="70">B</td>
<td height="40" style="text-align: center;" width="70">C</td>
<td height="40" style="text-align: center;" width="70">D</td>
<td height="40" style="text-align: center;" width="70">E</td>
<td height="40" style="text-align: center;" width="70">F</td>
</tr>
<tr>
<td height="40" style="text-align: center;" width="70">2</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"><br /></td>
</tr>
<tr>
<td height="40" style="text-align: center;" width="70">3</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" style="text-align: center;" width="70">4</td>
<td height="40" width="70"><br /></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" style="text-align: center;" width="70">5</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" style="text-align: center;" width="70">6</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" style="text-align: center;" width="70">7</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"><div style="text-align: center;">
8</div>
</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"><br /></td></tr>
</tbody></table>
Code 1 for table 1

<table align="center" border="1">
<tbody>
<tr>
<td colspan="7" height="40" style="text-align: center;">HEADER</td>
</tr>
<tr>
<td colspan="2" rowspan="7" style="text-align: center;" width="140">LEFT SIDEBAR</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
</tbody></table>
Code 2 for table 2


<table align="center" border="1">
<tbody>
<tr>
<td bgcolor="#ffd801" colspan="7" height="40" style="text-align: center;">HEADER</td>
</tr>
<tr>
<td bgcolor="ffff00" colspan="2" rowspan="7" style="text-align: center;" width="140">LEFT SIDEBAR</td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
<tr>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
<td height="40" width="70"></td>
</tr>
</tbody></table>
Code 3 for table 3


Tags:


 

©2013 @namakuherman | Developed by Herman Creative Industry