HTML: Nested Tables 101

Today, I’m gonna talk about nested tables using HTML. What is the connection of this with PHP? Oh, you will know! And I must tell you, you have to learn this because this is one of the foundations of web page development. Seriously, :)

You have to have 4 things [including the PC unit]:

1.Text Editor[gEdit, notepad, etc.]

2.browser[mozilla, chrome, opera, etc.]

3.and a bit of html basics together with imagination and common sense :D

We’re gonna use the <table></table> tags to make a table, <tr></tr>, <td></td> tags to make a single cell. So, how these tags will help us make a table?

In your body of your HTML file,  put the table tags:

<body>

<table>

</table>

</body>

inside the table tags, put the tr tags:

<body>

<table>

<tr>Cell1

</tr>

</table>

</body>

Ya’think we have a single cell? Eeeeengkz! Wrooong! Tr tags are dependent on the td tags. Means to say, your single-celled table won’t show up unless there are a td tag in it, or the information in your cell won’t be there coz your table is not totally define:

<body>

<table>

<tr>

<td>Cell1</td>

</tr>

</table>

</body>

This is what will look like if you dont put td tag in the tr tag..
This is a single-celled table

So, bear in mind that tr and td tags are in need of each other. You can’t build a table without these two.

And I almost forgot, you know the border = “1″ that’s on the table tag? That’s what we call attribute. You can put attributes in the tag to define the element, how do you want them to look.

There are many attributes existing and deprecated in html, because HTML is progressing, they have to update some codes and some of attributes are obsolete–there are attributes that are deprecated mostly in HTML4, most of it are converted to CSS[another mark-up language] to make the codes neat.

Btw, I used border to show how will it look like. :)

Note: TR refers to rows and the number TD inside a TR refers to how many part you want that row to be parted. Forzzample, I want my row to have 3 cells:

<body>

<table border=”1″>

<tr>

<td>Cell1</td>

<td>Cell2</td>

<td>Cell3</td>

</tr>

</table>

</body>

a table with 3 cells[or column] in one row

Or, I want to have 3 rows with 3 cells each:

<body>

<table border=”1″>

<tr>

<td>Row1 Cell1</td>

<td>Row1 Cell2</td>

<td>Row1 Cell3</td>

</tr>

<tr>

<td>Row2 Cell1</td>

<td>Row2 Cell2</td>

<td>Row2 Cell3</td>

</tr>

<tr>

<td>Row3 Cell1</td>

<td>Row3 Cell2</td>

<td>Row3 Cell3</td>

</tr>

</table>

.”]a table with 3 rows, each row has 3 cells[columns

So, now we’re gonna do nested tables! :D

To make a table inside another table, you only have to put the table tag inside the td tag:

<table>

<tr>

<td>

<table>

<tr>

<td>Table 2 Row1 Cell1</td>

<td>Table 2 Row1 Cell2</td>

<td>Table 2 Row1 Cell3</td>

</tr>

</table>

</td>

<td>Table 1 Row 1 Cell 2</td>

</tr>

<tr>

<td>Table 1 Row 2 Cell 1</td>

<td>Table 1 Row 2 Cell 2</td>

</tr>

</table>

. In the 1st row, 1st cell, there is a table with a row that has a 3 cells[columns]“]; in the first Row, 1st cell, has a table. The table has a row and 3 cells[column]“]a table with 2 rows which have 2 cells[columns

At first, you’ll get confused, but it’s normal. But if you got the idea, it’s a li’l bit fun, isn’t it? :)

Enough of that, I just want you to know the jurassic of tables, and it’s not advisable to make a layout out of tables. Hahaha, and I just want to make your life miserable, hahaha, kidding!

But seriously…

Anyhow, this is the page I’ve done using table with colspan and rowspan attributes:

A project of yours truly, showing with borders.
Borderless :D Neat huh? HAHAHA.. :O

It’s my demo, neat huh? Simple but neat. I din’t know that I can make a page out of tables. HAHAHA.. I thought it’s hard—- and yeh, it is. Too much thinking, and most especially when you don’t have any idea about tables, too many codes, and too much drama… Ooops, enough of the rants, you don’t need those, =)) let’s get to code!!:D

Now, we’re done how to make a layout out of tables, we’re gonna move on to the next page of HTML… Jan-jan-jaaaan! Table-less layout!!

Tip: Have an advance reading of <div> tags and CSS attributes.

It’s gonna be kewl, you know.

Ciao, for now! :D I hope you learn something from this post…

CHEERS TO LEARNING! :)

Thanks be to God!

======

References:

http://www.w3schools.com/html/default.asp

http://quackit.com/html/tutorial/

Sir Henyo

 

Original Post by Leona Khan
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: