HTML TABLES :- Elements and Attributes ~ MAD ABOUT COMPUTER

7/10/20

HTML TABLES :- Elements and Attributes

Suresh Mishra 2:42 AM basic information, Beginners, HTML, HTML5 No comments

HTML TABLES

In Html, table is used to represent data in tabular form. It is composed of columns and rows of cells that contain data in it. To create a table in your Html document we have to use <table> tag in our document.

Table Elements in HTML

<thead> :- define a table header
<tbody> :- define a table body
<tfoot> :- define a table footer
<tr> :- define a table row
<th> :- define a table heading
<td> :- define a table data

Table Attributes

align:- define the alignment of a table
colspan:- define how many columns should a cell span have.
rowspan:- define how many rows should a cell span have.
Cellpadding:- defines the space between the content of the cell and its border
Cellspacing:- It defines the space between two cells
Bgcolor:- It defines the background color of the cell.
Border:- It defines the border of the cell.

Let Us See through an example:-

Creating a simple table:-

<body>
<table>
<thead>
<tr>
<th> Name </th>
<th> Roll No </th>
<th> Age </th>
</tr>
</thead>
<tbody>
<tr>
<th> Ramesh </th>
<th> 05 </th>
<th> 18 </th>
</tr>
<tr>
<th> Mahesh </th>
<th> 06 </th>
<th> 17 </th>
</tr>
<tr>
<th> Rakesh </th>
<th> 07 </th>
<th> 15 </th>
</tr>
</tbody>
</table>

Output:-

Adding colgroup, width, background color, and border in an Html table.

Example:-

<table style=" background-color : purple;
border:3px solid black;
width:50%" >
<colgroup>
<col style = "background-color: orange">
<col style = "background-color: yellow">
<col style = "background-color: green">
</colgroup>
<thead>
<tr>
<th> Name </th>
<th> Roll No </th>
<th> Age </th>
</tr>
</thead>
<tbody>
<tr>
<th> Ramesh </th>
<th> 05 </th>
<th> 18 </th>
</tr>
<tr>
<th> Mahesh </th>
<th> 06 </th>
<th> 17 </th>
</tr>
<tr>
<th> Rakesh </th>
<th> 07 </th>
<th> 15 </th>
</tr>
</tbody>
</table>

Output:-

So that it for today guys. I hope you liked the article as well as Html Series. Thank you for your huge support. If you have any quarries related to this article comment below or DM on my social media.

Have a Good day.

Thanks for Visiting Here

PEOPLE ALSO READ:- HTML LIST :- Ordered List, Unordered List, Description List
PEOPLE ALSO READ:- HTML IMAGES :- INSERT AN IMAGE IN HTML DOCUMENT

"+y+""}else{if(A==5){c+='"}else{if(A==6){c+='

"}else{c+='

"+w+"

"}}}}}s.innerHTML=c+=""+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]>

MAD ABOUT COMPUTER

7/10/20