HTML- Hyper Text Markup Language and CSS Cascading Style Sheets

champak
HTML
₹2,000.00 ₹300.00
  • 24 students
  • 7 lessons
  • 2 quizzes
  • 10 week duration

Tables in HTML

HTML tables are used to represent data in a grid. The grid is composed of rows and columns. The table is created in row major order. This means that columns are stored inside rows.

The table tag starts with the <table> tag and ends with the  </table> tag. A row is defined using <tr> and closed using </tr>. Columns are defined using <td></td>. Data will be contained between <td> and </td>.

A sample table.


<!DOCTYPE html>
<!--
This is a comment and has no role in the page presentation
-->
<html>
<head>
<title>A Simple Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="2">
<tr><th>Name</th><th>Age</th><th>Runs</th></tr>
<tr><td><input type="text" value="Sachin Tendulkar"/></td><td>40</td><td>5000</td></tr>
<tr><td>Rahul Dravid</td><td>39</td><td>7000</td></tr>
</table>
</body>
</html>

The <th></th> tag is used instead of <td></td> to define a header row of the table. This will make the contents bold and also center it.

 

Merging of columns is done via the colspan property. By default every td has a colspan =1. By changing the colspan we can make it extend over more than one column. Consider the following code.


<!DOCTYPE html>
<!--
Merging of columns
-->
<html>
<head>
<title>Merging Columns</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="2">
<tr><th colspan="5">Records of Cricketers</th></tr>
<tr><td>Name</td><td>Age</td><th colspan="3">Record</th></tr>
<tr><td>Sachin Tendulkar</td><td>40</td><td>Runs:2000</td><td>Wickets:50</td><td>Catches:10</td></tr>

</table>
</body>
</html>

Merging of rows is similar and is done by using the rowspan property.


<!DOCTYPE html>
<!--
Merging of rows
-->
<html>
<head>
<title>Merging of Rows</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="2">
<tr><td>Name</td><td>Scores</td></tr>
<tr><td rowspan="3">Sachin Tendulkar</td><td>Run:10000</td></tr>
<tr><td>Catch:100</td></tr>
<tr><td>Wicket:101</td></tr>
</table>
</body>
</html>

 

Merging of rows and columns can be done in the same table and here is a sample table.


<!DOCTYPE html>
<!--
Rowspan and Colspan
-->
<html>
<head>
<title>Rowspan and Colspan</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="2">
<tr><th rowspan="2">1</th><td colspan="2">2</td></tr>
<tr><td>4</td><td>5</td></tr>
</table>
</body>
</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *