HTML Tables

HTML Table

<table> : tag used to create table in html.

<tr> : tag used to create row of html table.

<th> : tag used to create cell for heading. This tag text are bold and centered.

<td> : tag used to create cell for data. This tag text are regular and left-aligned.

Program

<!DOCTYPE html>
<html>
<body>

<h2>Simple HTML Table</h2>

<table style="width:100%" border="1" cellspacing="0"  >
  <tr>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td> Amar </td>
    <td> Thakur </td>
    <td> 22</td>
  </tr>
  <tr>
    <td> Kamal </td>
    <td>Singh</td>
    <td> 32 </td>
  </tr>
  <tr>
    <td> Mohit </td>
    <td>Thakur </td>
    <td> 23 </td>
  </tr>
  <tr>
    <td> Ravi </td>
    <td> Thakur </td>
    <td> 20 </td>
  </tr>
</table>

</body>
</html>

Try in editor

HTML Table Caption

<caption> : Tag used to add caption to html table.

Program

<!DOCTYPE html>
<html>
<body>

<h2> HTML Table With Caption</h2>

<table style="width:100%" border="1" cellspacing="0"  >

<caption> <b>My Friends List </b> </caption>
  <tr>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td> Amar </td>
    <td> Thakur </td>
    <td> 22</td>
  </tr>
  <tr>
    <td> Kamal </td>
    <td>Singh</td>
    <td> 32 </td>
  </tr>
  <tr>
    <td> Mohit </td>
    <td>Thakur </td>
    <td> 23 </td>
  </tr>
  <tr>
    <td> Ravi </td>
    <td> Thakur </td>
    <td> 20 </td>
  </tr>
</table>

</body>
</html>

Try in editor

HTML Colspan

colspan attribute used to span many columns.

Program

<!DOCTYPE html>
<html>
<body>

<h2> HTML Table With Colspan </h2>

<table style="width:100%" border="1" cellspacing="0"  height="300" >

  <tr>
    <th colspan="3"> </th>
  </tr>
  <tr>
    <td></td>
    <td>  </td>
    <td></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td>  </td>
  </tr>
  <tr>
    <td>  </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

Try in editor

HTML Rowspan

Program

<!DOCTYPE html>
<html>
<body>

<h2> HTML Table With Rowspan </h2>

<table style="width:100%" border="1" cellspacing="0"  height="300" >

  <tr>
      <td rowspan="5" ></td>
      <th></th>
      <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td>  </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

Try in editor

HTML Colspan and Rowspan

Program

<!DOCTYPE html>
<html>
<body>

<h2> HTML Table With Rowspan and Colspan </h2>

<table style="width:100%" border="1" cellspacing="0"  height="300" >

  <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
  </tr>
  <tr>
    <td></td>
    <td colspan="2" rowspan="2"></td>
     <td></td>
  </tr>
  <tr>
   <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td> </td>
    <td> </td>
   <td></td>
  </tr>
  <tr>
   <td></td>
    <td> </td>
    <td> </td>
   <td></td>
  </tr>
</table>
</body>
</html>

Try in editor

About Us

Comsysapp.com is an educational website. Students and software developers can learn programming language tutorials. Comsysapp is very useful for beginners and professional developers. Comsysapp provides tutorial in easy language. Comsysapp.com has focus on simplicity.

Services

Comsysapp.com provides free tutorials like c, html, css, etc. All tutorials are free for beginner and professionals.

Terms of Use

comsysapp.com is not responsible for any mistake. We are not responsible if information made available on our website is incomplete or invalid. But comsysapp.com always try for zero-zero mistake.

Privacy policy

comsysapp.com does not collect any data from users. We use Google AdSense advertising on our website. We never ask personal or private information.

Sitemap

sitemap