HtmlCssMonk

Tables in HTML | Learn Basic HTML

macbook, notebook, home office

DESCRIPTION

A table is an arrangement of data in rows and columns, or possibly in a more complex structure. In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

HTML table tags

TagDescription
<table>It defines a table.
<tr>It defines a row in a table.
<th>It defines a header cell in a table.
<td>It defines a cell in a table.
<caption>It defines the table caption.
<colgroup>It specifies a group of one or more columns in a table for formatting.
<col>It is used with <colgroup> element to specify column properties for each column.
<tbody>It is used to group the body content in a table.
<thead>It is used to group the header content in a table.
<tfooter>It is used to group the footer content in a table.

Note – The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.


HTML table Example

An Example of HTML table tag –

<table>  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Bruce</td><td>Lee</td><td>100</td></tr>  
<tr><td>Jackie</td><td>Chan</td><td>95</td></tr>  
<tr><td>Vidyut</td><td>Jamwal</td><td>90</td></tr>  
<tr><td>Scott</td><td>Adkins</td><td>85</td></tr>  
</table>  

This Code will produce the following result on your webpage –

First_NameLast_NameMarks
BruceLee100
JackieChan95
VidyutJamwal90
ScottAdkins85

Adding border to table

We have 2 ways to add border to our HTML table –

  1. Using border attribute of table in HTML
  2. Using CSS property

Here , we will see HOW TO ADD BORDER USING BORDER ATTRIBUTE.

<table border="1">   
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Bruce</td><td>Lee</td><td>100</td></tr>  
<tr><td>Jackie</td><td>Chan</td><td>95</td></tr>  
<tr><td>Vidyut</td><td>Jamwal</td><td>90</td></tr>  
<tr><td>Scott</td><td>Adkins</td><td>85</td></tr>  
</table>  

This Code will produce the following result on your webpage –

First_NameLast_NameMarks
SonooJaiswal60
JamesWilliam80
SwatiSironi82
ChetnaSingh72

NOTE – To add collapsed border in your table , use this property in head tag.

<style> 
table, th, td 
{ border: 1px solid black; border-collapse: collapse; } 
</style>

Next topic – Lists in HTML

Previous topic – Images in HTML


Leave a Comment

Your email address will not be published. Required fields are marked *