What is table tag in HTML? Which we are use in HTML? | Fully Explain | HTML.


  • The <table> tag is use for make a table in HTML.

  • In the table many tags are there like <tr><th><td>.

    <tr>  :- this tag is use for make a ROW.
    <th> :- this tag is use for make a table HEADER. In default case in <th> tag text are Bold and Align Center.
    <td> :- this tag is use for make a CELL/DATA
    In default case in <td> tag text are Regular and Left-Align.



Example:-





<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>ram</td>
    <td>Sia</td>
    <td>40</td>
  </tr>
  <tr>
    <td>shyam</td>
    <td>verma</td>
    <td>30</td>
  </tr>
  <tr>
    <td>magan</td>
    <td>mohan</td>
    <td>50</td>
  </tr>
</table>

</body>
</html>



Output:-







HTML Table - Cell Spans Many Columns


To make a cell span more than one column, use the colspan attribute.


HTML Table - Cell Spans Many Rows


To make a cell span more than one row, use the rowspan attribute.



How to make Professional Table ?

Code:-



<!DOCTYPE html>
<html>
<head>
  <title>TIME TABLE</title>
  <style>
    <style>
table, th, td {
  border: solid black ;
}

th, td {
  padding: 9.5px;
}
</style>

  </style>
</head>
<body>
<center><h1 ><b><u>TIME TABLE</u></b></h1></center>
<table border="3"; width="100%"; height="100%" ; style="background-color: yellow ;">
   <tr>
   <th colspan="8"; style="background-color: #ee82ee"> <center> GOVERNMENT ENGINEERING COLLEGE MODASA </center></th>
  </tr>

   <tr>
   <th colspan="8"> <center>CE/IT DEPARTMENT</center> </th>
  </tr>

 <tr>
   <th colspan="8";  style="background-color:tomato"> <center>CLASS TIME TABLE</center> </th>
  </tr>
   

 <tr>
   <td colspan="4"><b> CLASS </b></td>
   <td colspan="2"><b> <u>5ITB</u></b> </td>
   <td colspan="2"><b> w.e.f. 26/07/2020 </b></td>
  </tr>
<tr style="background-color:tomato ">
   <th colspan="4"></th>
   <th colspan="4"></th>
 </tr>
   <tr style="background-color:">
    <th></th>
    <th><b>TIME </b></th>
    <th><b>MON </b></th>
    <th><b> TUE </b></th>
    <th><b> WED </b></th>
    <th><b> THU </b></th>
    <th><b> FRI </b></th>
    <th><b> SAT </b></th>
  </tr>

  <tr>
    <td> 1 </td>
    <td style="background-color:dodgerblue"> <b>10:55 TO 11:55</b> </td>
    <td style="background-color:lightgray"> CN(3150710)-PSM-8211 </td>
    <td rowspan="2"; style="background-color: tomato ;"> B1 WD(3151606)-JBB-8213</br> B2 DE-IIA(3150001)-NA-8215</br> B3 DE-IIA(3150001)-NA-8216</br> B4 CN(3150710)-PSM-8217</br> </td>
    <td style="background-color:lightgray">  WD(3151606)-JBB-8213 </td>
    <td rowspan="2" ; style="background-color: tomato ;"> B1 DE-IIA(3150001)-NA-8213</br> B2 CS(3150714)-KKJ-8215</br> B3 CS(3150714)-NA-8216</br> B4 ADA(3150703)-NNM-8217</br> </td>
    <td style="background-color:lightgray"> CS(3150714)-JBB-8211 </td>
    <td style="background-color:tomato"> </td>

  </tr>
  <tr>
    <td> 2 </td>
    <td  style="background-color:dodgerblue "> <b>11:55 TO 12:55</b> </td>
    <td style="background-color:lightgray"> IPDC(3150005)-ABP-8211 </td>
    <td style="background-color:lightgray">  ADA(3150703)-SAC-8211 </td>
    <td style="background-color:lightgray"> CN(3150710)-AAP-8211 </td>
    <td style="background-color:tomato">  </td>
   

  </tr>
  <tr>
    <td> 3 </td>
    <td style="background-color:dodgerblue "> <b>13:20 TO 14:20</b> </td>
    <td rowspan="2" ; style="background-color: tomato ;"> B1 ADA(3150703)-NNM-8213</br> B2 CN(3150710)-PSM-8215</br> B3 WD(3151606)-JBB-8216</br> B4 CS(3150714)-VAR-8217</br> </td>
    <td rowspan="2" ; style="background-color: tomato ;"> B1 CS(3150714)-VAR-8213</br> B2 ADA(3150703)-NNM-8215</br> B3 CN(3150710)-PSM-8216</br> B4 WD(3151606)-JBB-8217</br> </td>
    <td rowspan="2" ; style="background-color: tomato ;"> B1 CN(3150710)-OPM-8213</br> B2 WD(3151606)-JBB-8215 </br> B3 ADA(3150703)-NNM-8216</br> B4 DE-IIA(3150001)-NA-8217 </br> </td>
    <td style="background-color:lightgray">  PE(3150709)-NA-8211 </td>
    <td style="background-color:lightgray"> ADA(3150703)-NNM-8211 </td>
    <td style="background-color:tomato"> </td>
    

  </tr>
  <tr>
    <td> 4 </td>
    <td style="background-color:dodgerblue "> <b>14:20 TO 15:20</b> </td>
    <td style="background-color:lightgray"> ADA(3150703)-NNM-8211 </td>
    <td style="background-color:lightgray"> IPDC(3150005)-MHV-8211 </td>
    <td style="background-color:tomato"> </td>

  </tr>
  <tr>
    <td> 5 </td>
    <td style="background-color: dodgerblue"> <b>15:30 TO 16:30</b> </td>
    <td style="background-color:lightgray"> PE(3150709)-NA-8211 </td>
    <td style="background-color:lightgray"> WD(3151606)-JBB-8211 </td>
    <td style="background-color:lightgray"> PE(3150709)-NA-8211 </td>
    <td style="background-color:lightgray"> CN(3150710)-AAP-8211 </td>
    <td style="background-color:lightgray"> CN(3150710)-PAB-8211 </td>
    <td style="background-color:tomato">  </td>

  </tr>
  <tr>
    <td> 6 </td>
    <td style="background-color:dodgerblue "> <b>16:30 TO 17:30</b> </td>
    <td style="background-color:lightgray">  </td>
    <td style="background-color:lightgray"> ADA(3150703)-SAC-8211 </td>
    <td style="background-color:lightgray">  </td>
    <td style="background-color:lightgray"> WD(3151606)-HRP-8211 </td>
    <td style="background-color:lightgray"> CS(3150714)-MVC-8211 </td>
    <td style="background-color:tomato">  </td>

  </tr>
</table>

</body>
</html>


Output:-