We will use three HTML Tags to create a table and we have to use these tags into the <body> and </body> tags. We will use the following tags, <table> <tr> and <td>. These three are the starting tags. So we must need to use the closing tags of them.
<table> and </table> to declare a table.
<tr> and </tr> tr means Table Row and we will use it to create a row.
<td> and </td> td means Table Data and we will use it to create a column and to show the data.
Make Your First Table Simply
Look at the table given below. There is two column and one row in the table. The table is placed at the center point and there is also border showing in the table.
| HTML Tutorial | CSS Tutorial |
Now see the codes given below into the box. I have used the following codes to create the above table. Look, I have also used two attributes align="center" and border="1" with the tag <table>. The value of the attribute align may be left/right/center and the value of the border attribute may be any number. You have to use border="0" to hide the border.
| <table align="center" border="1"> <tr> <td>HTML Tutorial</td> <td>CSS Tutorial</td> </tr> </table> |
|---|
Learn to Add More Rows and Columns
Now if you want to create a table of three columns and four rows then you have to use the following codes. Look I have just added <td>JavaScript Tutorial</td> into the above codes in <tr> and </tr> tag. And finally I have copied and later pasted the all of the <tr>...</tr> tags for more three times. Thus I have got more three rows.| <table align="center" border="1"> <tr> <td>HTML Tutorial</td> <td>CSS Tutorial</td> <td>JavaScript Tutorial</td> </tr> <tr> <td>HTML Tutorial</td> <td>CSS Tutorial</td> <td>JavaScript Tutorial</td> </tr> <tr> <td>HTML Tutorial</td> <td>CSS Tutorial</td> <td>JavaScript Tutorial</td> </tr> <tr> <td>HTML Tutorial</td> <td>CSS Tutorial</td> <td>JavaScript Tutorial</td> </tr> </table> |
|---|
This is the result of the above codes. If you need more column then you have to add more <td>Your Text</td> tags. Thus if you need more rows then you have to add more <tr></tr> tags.
HTML Tutorial
|
CSS Tutorial
|
JavaScript Tutorial
|
Website Designing
|
Graphics Designing
|
Programming
|
PHP Tutorial
|
Flash Tutorial
|
Dreamweaver Tutorial
|
ASP.NET Tutorial
|
My SQL Tutorial
|
Ajax Tutorial
|
Customize the Width and the Height of a Table and the Cells
You have already learned to create a table. Now we will see how to fix the width and the height of a table or of a cell. Look at the codes given bellow.
| <table> <tr> <td>A</td><td>B</td> </tr> <tr> <td>C</td><td>D</td> </tr> </table> |
|---|
The above codes are very simple codes to create a table. Now we will learn to customize it. <table> is an Opening Tag to create a table and we can use some attributes to customize a table. For example, we may use the attribute align="value" to confirm the position of the table. We can use three values with the align attribute. The values are-left, right and center.
border="value" value=any number
align="value" value=left/center/right
width="value" value=any number or 100%, 80% etc
bgcolor="value" value=any color name or code
No comments:
Post a Comment