The previous lesson of html lessons series was about html navigation menus. In this lesson we will learn to use the table tag in html.
Html Tables:
Tables in html are mostly used whenever we want to display some data in the form of a table (in the form of rows and columns). For example, If we want to display the details of a group of users in a web page (like First Name, Last Name, Age, Gender) we can easily do that by using a table in html. A table in html starts with a <table> tag and ends with a closing </table> tag. A table tag all by itself is useless and needs rows and columns to form the structure of a table. We can assign the width, height and border attributes to a table inside the table tag i.e
<table border="2" width="400" height="300" ></table>
The width and height specified above are in pixels.
tr Tag:
tr tag is used to create a row in a table. tr tag starts with a starting <tr> tag and ends with a matching </tr> tag. Just like an empty table tag is useless without the tr tag, similarly if there are no cells in a row (tr) of a table it is useless.
There are two ways to create cells in a table.
1. th tag 2. td tag
The cells created by the th tag are called header cells and the cells created by the td tag are called standard cells.
td Tag:
td tag is used inside the tr tag to create a cell in the row of a table. td tag starts with a starting <td> tag and ends with a matching </td> tag. Let us say we want want to create a table containing 5 rows and each row contains 3 cells then this is how we can do it:
<head>
<style>
tr{ width:450px; height:20px; }
td{ width:150px; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
<tr>
<td>Sam</td>
<td>18</td>
<td>New York</td>
</tr>
<tr>
<td>Jenny</td>
<td>21</td>
<td>Berlin</td>
</tr>
<tr>
<td>Andy</td>
<td>22</td>
<td>Rome</td>
</tr>
<tr>
<td>Shane</td>
<td>23</td>
<td>Washington</td>
</tr>
</table>
</body>
th Tag:
th tag is used inside the tr tag for the table headings. The cells created by th tag in a table are called header cells. The above table contains the data of a few people but there is no information about the type of data. For this purpose we can use the <th> tag to show data type information in the header cells. th tag is usually used in the top row instead of td for the heading puposes.
<head>
<style>
tr{ width:450px; height:20px; }
td{ width:150px; }
</style>
</head>
<body>
<table border="2">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
<tr>
<td>Sam</td>
<td>18</td>
<td>New York</td>
</tr>
<tr>
<td>Jenny</td>
<td>21</td>
<td>Berlin</td>
</tr>
<tr>
<td>Andy</td>
<td>22</td>
<td>Rome</td>
</tr>
<tr>
<td>Shane</td>
<td>23</td>
<td>Washington</td>
</tr>
</table>
</body>
Related Posts
Html Tables:
Tables in html are mostly used whenever we want to display some data in the form of a table (in the form of rows and columns). For example, If we want to display the details of a group of users in a web page (like First Name, Last Name, Age, Gender) we can easily do that by using a table in html. A table in html starts with a <table> tag and ends with a closing </table> tag. A table tag all by itself is useless and needs rows and columns to form the structure of a table. We can assign the width, height and border attributes to a table inside the table tag i.e
<table border="2" width="400" height="300" ></table>
The width and height specified above are in pixels.
tr Tag:
tr tag is used to create a row in a table. tr tag starts with a starting <tr> tag and ends with a matching </tr> tag. Just like an empty table tag is useless without the tr tag, similarly if there are no cells in a row (tr) of a table it is useless.
There are two ways to create cells in a table.
1. th tag 2. td tag
The cells created by the th tag are called header cells and the cells created by the td tag are called standard cells.
td Tag:
td tag is used inside the tr tag to create a cell in the row of a table. td tag starts with a starting <td> tag and ends with a matching </td> tag. Let us say we want want to create a table containing 5 rows and each row contains 3 cells then this is how we can do it:
<head>
<style>
tr{ width:450px; height:20px; }
td{ width:150px; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
<tr>
<td>Sam</td>
<td>18</td>
<td>New York</td>
</tr>
<tr>
<td>Jenny</td>
<td>21</td>
<td>Berlin</td>
</tr>
<tr>
<td>Andy</td>
<td>22</td>
<td>Rome</td>
</tr>
<tr>
<td>Shane</td>
<td>23</td>
<td>Washington</td>
</tr>
</table>
</body>
th Tag:
th tag is used inside the tr tag for the table headings. The cells created by th tag in a table are called header cells. The above table contains the data of a few people but there is no information about the type of data. For this purpose we can use the <th> tag to show data type information in the header cells. th tag is usually used in the top row instead of td for the heading puposes.
<head>
<style>
tr{ width:450px; height:20px; }
td{ width:150px; }
</style>
</head>
<body>
<table border="2">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
<tr>
<td>Sam</td>
<td>18</td>
<td>New York</td>
</tr>
<tr>
<td>Jenny</td>
<td>21</td>
<td>Berlin</td>
</tr>
<tr>
<td>Andy</td>
<td>22</td>
<td>Rome</td>
</tr>
<tr>
<td>Shane</td>
<td>23</td>
<td>Washington</td>
</tr>
</table>
</body>
Basics of Html
Row and Column Span in html
Html Form Elements
Simple 2 column layout of a web page
3 column layout of a web page
Html Text Tags
Html Image and Anchor Tags
Iframe tag in html
No comments:
Post a Comment