Creating a Simple Table
You have to use the codes given below to create a table of two columns and two rows. Step by step we will add more columns and rows to this table and finally we will create a full functional website of several pages. Lets learn how to create a webpage using the codes given below.
You have to use the codes given below to create a table of two columns and two rows. Step by step we will add more columns and rows to this table and finally we will create a full functional website of several pages. Lets learn how to create a webpage using the codes given below.
<!DOCTYPE html>
<html>
<head>
<title>Learn Website Designing</title>
</head>
<body>
<table align="center" border="1" style="width: 100%;">
<tbody align="center">
<tr><!--codes for the first row-->
<td>A</td><td>B</td>
</tr><!--end of the codes for the first row-->
<tr><!--codes for the second row-->
<td>A1</td><td>B1</td>
</tr><!--end of the codes for the second row-->
</tbody>
</table>
</body>
</html>
|
|---|
Note: The Ash Colored Codes are not important and/or necessary.
You will get a table as showing below.
You will get a table as showing below.
| A | B |
| A1 | B1 |
Explanation of the codes
To create a table I have used the <table> tag in the first line. I have used the attributes align="center", border="1" and style="width: 100%;". That's why the table will be placed in the center position, the width of the table will be 100% according to the webpage size and there will be a border of 1px.
I have used align="center" but you may also use align="left" or align="right". The value for the width attribute may be 80% or 700px. You have to use the closing tag </table> for the opening tag <table>.
In the second line I have used <tbody align="center"> so that all the text of the cells stay in the center position. In the first line I have also used the same attribute align="center" but for the table position only. If you want to show the text in the center position then you have to use <tbody align="center">.
Then in the third line I have used the tag <tr> to create a row and then <td></td> to create a cell. Thus I have used <tr><td>A</td><td>B</td></tr> to create a row and two columns inside of the row. <td>A</td> is for the first column and <td>B</td> for the second column. Thus I have created another row with two columns by the codes <tr><td>A1</td><td>B1</td></tr>.
Add an Extra Row and an Extra Column
Now we will add one more column and one more row with the above table. So we have to use the following codes given below in the box.
<tr><!--codes for the first row-->
<td>A</td><td>B</td><td>C</td>
</tr><!--end of the codes for the first row-->
<tr><!--codes for the second row-->
<td>A1</td><td>B1</td><td>C1</td>
</tr><!--end of the codes for the second row-->
<tr><!--newly added codes for the third row-->
<td>A2</td><td>B2</td><td>C2</td>
</tr><!--end of the codes for the third row-->
|
|---|
Now we will get the table given below.
| A | B | C |
| A1 | B1 | C1 |
| A2 | B2 | C2 |
Create a Table of 10 Rows and 6 Columns
Following the above tricks we will now create a new table with six columns and 10 rows. Later we will change it to a general webpage with several buttons, pages etc. Try yourself to create a table as shown below.
| A | B | C | D | E | F |
| A1 | B1 | C1 | D1 | E1 | F1 |
| A2 | B2 | C2 | D2 | E2 | F2 |
| A3 | B3 | C3 | D3 | E3 | F3 |
| A4 | B4 | C4 | D4 | E4 | F4 |
| A5 | B5 | C5 | D5 | E5 | F5 |
| A6 | B6 | C6 | D6 | E6 | F6 |
| A7 | B7 | C7 | D7 | E7 | F7 |
| A8 | B8 | C8 | D8 | E8 | F8 |
| A9 | B9 | C9 | D9 | E9 | F9 |
If you fail then you may use the codes given below.
<table align="center" border="1" style="width: 100%;">
<tbody align="center">
<tr>
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td>
</tr>
<tr>
<td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td><td>F1</td>
</tr>
<tr>
<td>A2</td><td>B2</td><td>C2</td><td>D2</td><td>E2</td><td>F2</td>
</tr>
<tr>
<td>A3</td><td>B3</td><td>C3</td><td>D3</td><td>E3</td><td>F3</td>
</tr>
<tr>
<td>A4</td><td>B4</td><td>C4</td><td>D4</td><td>E4</td><td>F4</td>
</tr>
<tr>
<td>A5</td><td>B5</td><td>C5</td><td>D5</td><td>E5</td><td>F5</td>
</tr>
<tr>
<td>A6</td><td>B6</td><td>C6</td><td>D6</td><td>E6</td><td>F6</td>
</tr>
<tr>
<td>A7</td><td>B7</td><td>C7</td><td>D7</td><td>E7</td><td>F7</td>
</tr>
<tr>
<td>A8</td><td>B8</td><td>C8</td><td>D8</td><td>E8</td><td>F8</td>
</tr>
<tr>
<td>A9</td><td>B9</td><td>C9</td><td>D9</td><td>E9</td><td>F9</td>
</tr>
</tbody></table>
|
|---|
Add <tr></tr> tags to create more rows and used <td></td> tags to create more columns.
Plan for a Webpage
The cells A, B, C, D, E and F will be the banner of the webpage and A1, B1, C1, D1, E1 and F1 will be the menu for the webpages. The other cells A2, B2, C2, D2, E2 and F2 will be used to show the current news or important messages. And the cells A3, A4, A5, A6 and A7 will be used for the side menus. And finally the others cells will the main blank portion of the page where the main content will be shown.
| A | B | C | D | E | F |
| A1 | B1 | C1 | D1 | E1 | F1 |
| A2 | B2 | C2 | D2 | E2 | F2 |
| A3 | B3 | C3 | D3 | E3 | F3 |
| A4 | B4 | C4 | D4 | E4 | F4 |
| A5 | B5 | C5 | D5 | E5 | F5 |
| A6 | B6 | C6 | D6 | E6 | F6 |
| A7 | B7 | C7 | D7 | E7 | F7 |
| A8 | B8 | C8 | D8 | E8 | F8 |
| A9 | B9 | C9 | D9 | E9 | F9 |
The table given below is the expected table to turn it to a webpage.
| A | |||||
| A1 | B1 | C1 | D1 | E1 | F1 |
| A2 | |||||
| A3 | B3 | ||||
| A4 | |||||
| A5 | |||||
| A6 | |||||
| A7 | |||||
| A8 | |||||
| A9 | |||||
The necessary codes for the above table is given below.
<table align="center" border="1" style="width: 100%;">
<tbody align="center">
<tr>
<td colspan="6">A</td>
</tr>
<tr>
<td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td><td>F1</td>
</tr>
<tr>
<td colspan="6">A2</td>
</tr>
<tr>
<td>A3</td><td colspan="5" rowspan="7">B3</td>
</tr>
<tr>
<td>A4</td>
</tr>
<tr>
<td>A5</td>
</tr>
<tr>
<td>A6</td>
</tr>
<tr>
<td>A7</td>
</tr>
<tr>
<td>A8</td>
</tr>
<tr>
<td>A9</td>
</tr>
</tbody>
</table>
|
|---|
Final Touch for the Webpage
Fairytips This website is full of HTML Tutorial. You will also learn more about Website Designing from this site. Just stay with me and learn to design a website easily. | |||||
| Home | HTML | CSS | JAVA | PHP | About Me |
| ASP.NET | Your Content Here... | ||||
| MySQL | |||||
| XML | |||||
| XHTML | |||||
| Ads Here | |||||
| Text Board | |||||
| More... | |||||
The codes for the above table is given below.
<table align="center" border="0" style="width: 100%;">
<tbody>
<tr>
<td align="align" bgcolor="45818e" colspan="6"><blockquote>
<h1>
Fairytips</h1>
This website is full of HTML Tutorial. You will also learn more about Website Designing from this site. Just stay with me and learn to design a website easily.</blockquote>
</td>
</tr>
<tr align="center" bgcolor="45818e">
<td width="15%"><span style="color: #f1f1f1;" onmouseover="menu">Home</span></td>
<td><span style="color: #f1f1f1;">HTML</span></td>
<td><span style="color: #f1f1f1;">CSS</span></td>
<td><span style="color: #f1f1f1;">JAVA</span></td>
<td><span style="color: #f1f1f1;">PHP</span></td>
<td><span class="Apple-style-span" style="color: #f1f1f1;">About Me</span></td>
</tr>
<tr>
<td colspan="6"><marquee>Learn HTML</marquee></td>
</tr>
<tr>
<td align="center" bgcolor="45818e">ASP.NET</td>
<td colspan="5" rowspan="7" valign="top">Your Content Here...</td>
</tr>
<tr>
<td align="center" bgcolor="45818e">MySQL</td>
</tr>
<tr>
<td align="center" bgcolor="45818e">XML</td>
</tr>
<tr>
<td align="center" bgcolor="45818e">XHTML</td>
</tr>
<tr>
<td align="center" bgcolor="45818e">Ads Here </td>
</tr>
<tr>
<td align="center" bgcolor="45818e">Text Board </td>
</tr>
<tr>
<td align="center" bgcolor="45818e">More...</td>
</tr>
</tbody>
</table>
|
|---|
Finally all the codes for the last table is given in the above box. You can create the table using these codes, copy the codes and paste them inside the <body> and </body> tags. Then save the webpage and open it in a web browser.
No comments:
Post a Comment