In this page, we'll study the purpose of a table and how is it being inserted.
What is a table?
A Table is used to organize datas or information. It has rows and columns that separates one data/information to another.
Tags of a Table
Below are the list of the tags used to insert a table:
- <table>
***
</table>
- This tag declares where will the table being inserted starts and ends.
- <caption>***</caption>
- This tag is used to input the title of what you have on your table.
- <tr>***</tr>
- The tag name "tr" stands for "table row".
- This tag declares the beginning and end of a table row.
- <th>***</th>
- The tag name "th" stands for "table heading".
- This tag indicates the column header of your table.
- <td>***</td>
- The tag name "td" stands for "table data".
- This tag indicates the data that will be inputted inside the table.
Note:
- The asterisks in the table tag represent the area where you'll insert the other tags for the table to appear. See sample 1 below. ↓
- The asterisks in the caption tag represent the area where you'll insert the title you want your table to have.
- The asterisks on the table row tag represent the area where you'll insert the other tags for the appearance of your inputted data. See sample 1 below. ↓
- The asterisks on the table header tag represent the area where you'll insert the column header title.
- The asterisks on the table data tag represent the area where you'll insert the data that you have.
- Every data you will enter should be enclosed in the table data tag.
- You won't be able to input datas on the next row unless you close the table row tag because the more you add a table heading or a table data without closing the table row tag, a column will be added on the same row.
Sample 1
Note: The code will be found next to the inserted sample table.
Sample Table 1
| Column Heading 1 |
Column Heading 2 |
Column Heading 3 |
| Data 1 |
Data 2 |
Data 3 |
| Data 4 |
Data 5 |
Data 6 |
Noticed that datas 4, 5, and 6 were place under the datas 1, 2, and 3 respectively.
Codes used to insert the sample table above:
<table>
<caption>Sample Table 1</caption>
<tr>
<th>Column Heading 1</th>
<th>Column Heading 2</th>
<th>Column Heading 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
Attributes of a table
The attributes listed below are just some of many that you will most likely use:
- Border
- This attribute is used to put borders between cells to show the divission of each cell.
- Colspan
- This attribute is used to combine or merge cells by columns.
- Rowspan
- This attribute is used to combine or merge cells by rows.
Note:
- The border attribute is always at the opening table tag like this:
<table border="***">.
- Both the colspan and rowspan attributes can be input at the opening tag of a table header or table data like this:
<th colspan="***">
<th rowspan="***">
<td colspan="***">
<td rowspan="***">
- The asterisks in the border attribute represent the value of the border having a minimum value of 0 which results to no border at all. As you increase its value, the border will get thicker and thicker but the value has no maximum.
- The asterisks in the colspan and rowspan attribute represent the number of row or column cell that you'll combine or merge.
Try It
If you want to try what you have learned in this page, open a notepad and perform them.
Note:
- In saving the file, always put ".htm" as the file extention or else it will just be saved as plane text file.
- Make sure that the "file subtype" in the dialog box is set as "all files".
- Set the encoding to "utf - 8".
Back to home
back to top
© CopyrightMMK 2017