 |
| HTML and CSS tutorial for beginners in English |
In our previous lesson we saw how to insert an audio in a web page.
Today we will study displaying tables in web pages.
HTML tables
<table> tag is used to create a table. A table consists of rows columns. We can give headings columns. We can give a caption to a table.We are going to prepare a table in which there are 3 columns. First column is serial number, second column is name of country, and third name is name of continent. Name of our table is "Countries and Continents".
 |
| Figure 16-1 Table rows, columns, column heading, table caption |
Now let us write code for displaying a table in web page. Open a Notepad file. In this file copy text of Lesson-15 from first line to <body>. Next write
<table>. This tag is used for creating a table. <tr> tag is used for creating a row in a table. <th> tag is used to give column headings. This is written as follows:
<tr>
<th>column heading-1</th>
<th>column heading-2</th>
<th>column heading-2</th>
</tr>
So for defining a row we simply replace <th> with <td> in above code written for heading. In our table there are 3 columns in our table. Therefore there will be 3 <td> elements for every row in our table. Coding for rows will be as follows:
<tr> first row
<td>first column</td>
<td>second column</td>
<td>third column</td>
</tr>
Note that number of <tr> elements will be equal to number of rows.
<caption> tag is used for giving name of table. This is always displayed in center. Column headings are bold and centered.
Now write following code in the Notepad file that we have opened.
<table>
<caption>Countries and Continents</caption>
<tr>
<th>Serial Number</th>
<th>Country</th>
<th>Continent</th>
</tr>
<tr>
<td>01</td>
<td>India</td>
<td>Asia</td>
</tr>
<tr>
<td>02</td>
<td>United Kingdom</td>
<td>Europe</td>
</tr>
<tr>
<td>03</td>
<td>United States of America</td>
<td>North America</td>
</tr>
<tr>
<td>04</td>
<td>Japan</td>
<td>Asia</td>
</tr>
<tr>
<td>05</td>
<td>Germany</td>
<td>Europe</td>
</tr>
</table>
Next give </ body> and </html>, Save this as "Lesson-16" and "Lesson-16.html". Click on figure 16-1 for PDF file of source code.
 |
| Figure 16-2. HTML table, HTML table tag |
Now double click on HTML document. See output. Our table is displayed in web page.
 |
| Figure 16-3 Table in a web page |
We can style this table like giving colors to table heading, column heading, or rows. But we will need to learn CSS for this. We will study this in detail in our lesson on CSS tables.
Important Point:
1. <table> is used to display a table in a web page.2. <tr> tag is used to define rows in a table.
3. <th> are written inside <tr> to define headings of columns. Column headings are always bold and centered.
4. <td> are written inside <tr> to define data in every row.
5. Caption of a table is always centered.
Lesson-15 Lesson-17
