HTML5 Basics–Practice 12

This practice is in continuation to HTML5 Basics–Practice 11. We will talk of some more features related to tables. Sometimes we might want to cells of rows or columns. To do so, we use attributes colspan and rowspan. We can also add a caption for the table. Type the following code.

“Code Starts”

<!Doctype html>
<html>
<head>
<title>Eighth Page</title>
<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
th, td
{
padding: 9 px;
text-align: center;
}
</style>
</head>
<body>
<h1>With Border</h1>
<table style=”width:100%”>
<tr>
<th>S.No.</th>
<th colspan=”2″>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1.</td>
<td>John</td>
<td>Jack</td>
</tr>
<tr>
<td>Snow</td>
<td>Shah</td>
</tr>
</body>
</html>

“Code Ends”

The colspan attribute combines the cell with the cell to its right.

Output:

Now to add rowspan, add the statement that is in bold-italics.

“Code Starts”

<!Doctype html>
<html>
<head>
<title>Eighth Page</title>
<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
th, td
{
padding: 9 px;
text-align: center;
}
</style>
</head>
<body>
<h1>With Border</h1>
<table style=”width:100%”>
<caption>Simple Table Features</caption>
<tr>
<th>S.No.</th>
<th colspan=”2″>Name</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan=”2″>1.</td>
<td>John</td>
<td>Jack</td>
</tr>
<tr>
<td>Snow</td>
<td>Shah</td>
</tr>
</body>
</html>

“Code Ends”

The rowspan attribute merges the cell with the one below it. But if you see, the number “2” shift to the next cell. That is because we did not remove the statement and assigned a cell for the same. Remove the same and you will get the correct output.

Output:

We can also add caption to the table. Add the following statement:

 

 

 

Output:

Advertisements

One thought on “HTML5 Basics–Practice 12

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s