HTML Tables


Tables are an important element in HTML. You can use table to display various data and information in a tabular form.

Tables are defined using the <table> tag. Each row is defined by <td> tag and column is defined by <th> tag.

eg

<!DOCTYPE html>
<html>
<body>
<table>
  <tr><b>
    <th>S. Num</th>
    <th>Student Name</th>
    <th>Marks</th>
	</b>
 </tr>
  <tr>
    <td>1</td>
    <td>Kunal</td> 
    <td>87</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Rohit</td> 
    <td>78</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Sahil</td> 
    <td>98</td>
  </tr>
</table>

</body>
</html>

output:


Each table can have various style properties. We can directly insert style properties in table or define using a css file as mentioned in previous tutorial

eg

<!DOCTYPE html>
<html>
<head>
<style>
#da,tr ,td {
    border: 2px solid blue;
}
</style>

<link rel="stylesheet" href="table_style.css">

<head>
<body>
<table id="da">
  <tr><b>
    <th>S. Num</th>
    <th>Student Name</th>
    <th>Marks</th>
	</b>
 </tr>
  <tr>
    <td>1</td>
    <td>Kunal</td> 
    <td>87</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Rohit</td> 
    <td>78</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Sahil</td> 
    <td>98</td>
  </tr>
</table>


<br><br>

<table id="oc_table">
  <tr><b>
    <th>S. Num</th>
    <th>Student Name</th>
    <th>Marks</th>
	</b>
 </tr>
  <tr>
    <td>1</td>
    <td>Kunal</td> 
    <td>87</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Rohit</td> 
    <td>78</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Sahil</td> 
    <td>98</td>
  </tr>
</table>

</body>
</html>

css file (table_style.css):

#oc_table {
    width: 100%; 
    background-color: #f1f1c1;
	border 5px solid black;
}

output :


Extending a row or column size:

In many cases there are tables where a cell occupies more than one column or row. In those cases we use rowspan and colspan tags to define extended cells of table

eg:

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td {
    border: 2px solid green;
}
</style>
<head>
<body>
<table>
  <tr><b>
    <th>S. Num</th>
    <th>Student Name</th>
    <th>Marks</th>
	</b>
 </tr>
  <tr>
    <td>1</td>
    <td colspan="2">Kunal</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Rohit</td> 
    <td>78</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Sahil</td> 
    <td>98</td>
  </tr>
</table>

<br><br>
<table>
  <tr><b>
    <th>S. Num</th>
    <th>Student Name</th>
    <th>Marks</th>
	</b>
 </tr>
  <tr>
    <td rowspan="2">1</td>
    <td>Kunal</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Rohit</td> 
    <td>76</td> 
  </tr>
  <tr>
    <td>3</td>
    <td>Sahil</td> 
    <td>98</td>
  </tr>
</table>


</body>
</html>

output:




Related Tutorials