HTML Table

 HTML table tag is used to display data in tabular
form (row * column). There can be many columns in
a row.
 We can create a table to display data in tabular form,
using <table> element, with the help of <tr> , <td>,
and <th> elements.
 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 tables are used to manage the layout of the
page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the
page .

 Attribute of<th> — table header — A header cell in
a <table>.
 <td> — table data — A data cell in a <table>.

HTML Table Tags
Tag Description
<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.

HTML Border attribute
 <table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
 </table>

HTML table with caption
 HTML caption is diplayed above the table. It must
be used after table tag only.
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>

What does colspan= do?
 Allows a single table cell to span the width of more
than one cell or column.
<table> <caption>Life Expectancy By Current
Age</caption>
<tr> <th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr> <
/table>
Life Expectancy By Current Age
65 40 20
Men Women Men Women Men Women
82 85 78 82 77 81

What does rowspan= do?
Allows a single table cell to span the height of more than one cell or row.
<table>
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th></th>
<th></th>
<th>Bob</th>
<th>Alice</th>
</tr> <tr>
<th rowspan="2">Favorite</th> <th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr> <tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr> <tr>
<th rowspan="2">Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr> <tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
Bob Alice
Favorite
Color Blue Purple
Flavor Banana Chocolate
Least
Favorite
Color Yellow Pink
Flavor Mint Walnut

Table background color
 The HTML <table> bgcolor Attribute is use
to specify the background color of a table.
Syntax:
<table bgcolor="color_name | hex_number |
rgb_number">
Attribute Values:
color_name: It sets the text color by using the color name. For
example “red”.
hex_number: It sets the text color by using the color hex code. For
example “#0000ff”.
rgb_number: It sets the text color by using the rgb code. For
example: “RGB(0, 153, 0)” .
Note: The <table> bgcolor Attribute is not supported by HTML 5 instead of
using this we can use CSS background-color property. .

<table border="1"
bgcolor="green">
<caption>
Author Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>

<td> bgcolor Attribute
 The HTML <td> bgcolor attribute is used to specify
the background color of a table cell. It is not
supported by HTML 5.
Syntax:
 <td bgcolor= "color_name | hex_number |
rgb_number">
Attribute Values:
 color_name: It sets the text color by using the color
name. For example “red”.
 hex_number: It sets the text color by using the color
hex code. For example “#0000ff”.
 rgb_number: It sets the text color by using the rgb
code. For example: “RGB(0, 153, 0)”.

<tr>
<td bgcolor="green">BITTU</td>
<td bgcolor="red">22</td>
<td bgcolor="yellow">CSE</td>
</tr>
<tr>
<td bgcolor="yellow">RAKESH</td>
<td bgcolor="green">25</td>
<td bgcolor="red">EC</td>
</tr>

HTML <colgroup> Tag
<table>
<colgroup>
<col span="2" style="background-
color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

The <tbody> tag is used to group the
body content in an HTML table.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>