HTML Tables in Learning Lesson:
HTML Tables: When it comes to data manipulation and presentation, sometimes it becomes necessary to use tables i.e. rows and columns become very handy. Where word processers like MS word and Open office offer us the tools to draw tables, HTML code is also enriched with the power to create and layout tabular data format. HTML table attributes and tags are mentioned below:
<table> </table>: Basic tag for defining and initiating a table in HTML
<tr> </tr>: HTML allows us to define table row, but it does not permits defining of columns separately.
<td> </td>: Table cell data is contained in <td>. We can specify as many <td> items in a table row as we want. This replaces the issue of columns in HTML tables.
Let us create a sample table in the below process.
Step 1: Begin with the basic initiation of table in HTML:
<table> </table>
Step 2: Place a table row i.e. <tr></tr> in the table you initiated. You should also declare table border for your table because browsers don’t add border to tables automatically. We have added a border thickness in the below code:
<table border= “1”> <tr> </tr> </table> |
Step 3: Insert a couple of data cells in the row we created.
<table> <tr> <td>First Row Data Cell 1 </td> </tr> </table> |
Step 4: View the result. It would look something like this:
Step 5: Add another Data Cell in the <tr> we have already created:
<table border=”1″> <tr> <td>First Row Data Cell 1 </td> <td>First Row Data Cell 2 </td> <td>First Row Data Cell 3 </td> </tr> </table> |
Step 6: See the output of above code in your browser:
Step 7: Let us now create more rows in this first table of ours.
<table border=”1″> <tr> <td>First Row Data Cell 1 </td> <td>First Row Data Cell 2 </td> <td>First Row Data Cell 3 </td> </tr> <tr> <td>Second Row Data Cell 1 </td> <td>Second Row Data Cell 2 </td> <td>Second Row Data Cell 3 </td> </tr> </table> |
Step 8: Let us see the outcome of our above code in the browser: