HTML Table (Advanced Tutorial)
Html table
How to add border?
How to add table cell <TD>?
How to add rows?
What is Colspan?
Color
chart: Click here to chose color for your background.
Practice HTML Use
this feature or your Notepad.
HTML Table
Every Table has Row and
Cell.
<table> </table>
It is an opening and closing tag for
table.
<tr> </tr> It
is a tag for Horizontal table Row. This
tag should go inside the <table> tag.
<td> </td> It
represents table Cell. You can add several cells
in one <tr>.
This tag goes inside the <tr>.
<table>
<tr>
<td> Text </td>
</tr>
</table>
|
Ok now let's see how to create a basic
simple table.
Type this basic html tags in your notepad or in our Practice
Html feature.
<table> tag should go inside the <body> tag.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<table>
<tr>
<td> Text</td>
</tr>
</table>
</body>
</html>
|
hmm... There are no tables. Right,
you only see Text.
This table needs border. Ok let's
add border in our table.
How to add border?
Let's copy the same above tag.
Now add border attribute inside the <table>
tag.
border="1"
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<table border="1">
<tr>
<td> Text
</td>
</tr>
</table>
</body>
</html>
|
Ok now your table should look like this.
Now try this one. Change
border number to 5. This type of border looks good with
photo, pic etc.
border="5"
If you don't want any borders around
your table you can do it by adding zero instead of any number.
border="0"
We'll come back and learn more
about different styles of borders later.
How
to add Table cell <TD>:
Ok now we'll learn how to add cells in
our table.
<table border="1">
<tr>
<td>
Cell 1</td>
<td>
Cell 2</td>
<td>
Cell 3</td>
</tr>
</table>
Type this in Practice HTML or Notepad and
see how it looks.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<table border="1">
<tr>
<td>
Cell 1</td>
<td>
Cell 2</td>
<td>
Cell 3</td>
</tr>
</table>
</body>
</html>
|
Your table should look like this. Now our
table has 3 cells.
The same way you can add as many as cells.
Add more <td> tags to increase
number of cell.
How to add Rows?
Now let's add more than one row in our
table.
<table border="1">
<tr>
<td> Cell 1</td>
<td> Cell 2</td><td>
Cell 3</td>
</tr>
<tr>
<td>Text</td>
</tr>
</table>
Notice we've added one more
<tr> </tr> tag in
our previous code.
<td> </td>
tags should be added with each <tr> tags.
All the text should go inside <td> tag.
Ok let's add our basic html tags with it and see how it
works.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<table border="1">
<tr>
<td> Cell 1</td>
<td> Cell 2</td><td>
Cell 3</td>
</tr>
<tr>
<td>Text</td>
</tr>
</table>
</body>
</html>
|
Now your table should look like this.
O..oo bottom row has some problem.
The reason is upper row has 3 cell but bottom row has only
one cell. The bottom cell needed 3 column expansion. So
we'll add colspan
to make it right.
What is Colspan?
Number of columns in a cell should span is
called Colspan.
In above example we can see the bottom cell needs to span
3 columns so colspan should be 3. colspan="3"
This colspan should go inside <td> tag.
<td colspan="3">
Ok type the same previous tags.
Now just add colspan in it.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<table border="1">
<tr>
<td> Cell 1</td>
<td> Cell 2</td><td>
Cell 3</td>
</tr>
<tr>
<td colspan="3">Text</td>
</tr>
</table>
</body>
</html>
|
Now your table should look like this.
In Next lesson we'll learn more about table.
