HTML <table> Tag
Syntax
<table>
<tr>
<th>Course</th>
<th>Articles</th>
</tr>
<tr>
<td>HTML</td>
<td>HTML Table</td>
</tr>
</table>
Note: The HTML <table> tag supports the Global Attributes and Event Attributes.
Example 1: The example illustrates the implementation of an HTML table.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >HTML table tag</ title > < style > body { text-align: center; } h1 { color: green; } table, th, td { margin: auto; border: 1px solid black; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >HTML < table > tag</ h3 > < table > < tr > < th >Name</ th > < th >Age</ th > < th >Class</ th > </ tr > < tr > < td >Shivika</ td > < td >11</ td > < td >7</ td > </ tr > < tr > < td >Gauri</ td > < td >18</ td > < td >12</ td > </ tr > < tr > < td >Mahima</ td > < td >15</ td > < td >10</ td > </ tr > </ table > </ body > </ html > |
Output:
Example 2: The example shows the implementation table tag by using rowspan and colspan with Custom CSS Style for background-color, right align, and border-collapse.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >HTML table tag</ title > < style > body { text-align: center; } h1 { color: green; } table, td, th { border: 2px solid black; border-collapse: collapse; } table { margin: auto; background-color: rgb(173, 240, 213); } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 > HTML table with Custom style (right- align, border-collapse and background-color) </ h3 > < table > < tr > < th rowspan = "2" >Name</ th > < th colspan = "2" >Details</ th > </ tr > < tr > < th >Age</ th > < th >Class</ th > </ tr > < tr > < td >Shivika</ td > < td >11</ td > < td >7</ td > </ tr > < tr > < td >Gauri</ td > < td >18</ td > < td >12</ td > </ tr > < tr > < td >Mahima</ td > < td >15</ td > < td >10</ td > </ tr > < tr > < td >Shree</ td > < td >15</ td > < td >10</ td > </ tr > < tr > < td >Kanha</ td > < td >15</ td > < td >10</ td > </ tr > </ table > </ body > </ html > |
Output:
Example 3: The example shows the implementation of table tag with Browser’s Default CSS.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width,initial-scale=1.0" > < title >HTML table tag</ title > < style > table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; border-spacing: 2px; border-color: gray; } </ style > </ head > < body > < table > < tr > < th >Name</ th > < th >Age</ th > < th >Class</ th > </ tr > < tr > < td >Shruti</ td > < td >10</ td > < td >6</ td > </ tr > < tr > < td >Ravi</ td > < td >18</ td > < td >12</ td > </ tr > < tr > < td >Ankur</ td > < td >15</ td > < td >10</ td > </ tr > < tr > < td >Gopal</ td > < td >12</ td > < td >8</ td > </ tr > </ table > </ body > </ html > |
Output:
HTML DOM Object
The HTML Table can be accessed with the help of the HTML DOM Table Objects.
Browser Support
- Chrome 1
- Edge 12
- Firefox 1
- Opera 12.1
- Safari 1
Contact Us