HTML5 Basics–Practice 11

Today we are going to discuss about tables. A table has components like heading, cell, row, column, and so on. It can have borders. Generally table with borders are preferred as it makes the content look more organized. We will first create a table without borders.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Seventh Page</title>
</head>
<body>
<h1>Without Border</h1>
<table style=”width:100%”>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1.</td>
<td>John</td>
<td>50</td>
</tr>
<tr>
<td>2.</td>
<td>Snow</td>
<td>60</td>
</tr>
</body>
</html>

“Code ends”

Output:

capture13.png

Now to create a table with border, you only have to add the following inside the style tag:

<style>
table, th, td
{
border:1px solid black;
border-spacing: 6px;
}
</style>

Refer to HTML5 Basics–Practice 8 for more details on style tag.

Output:

If we check carefully, there is space between cells. In order to collapse the cells, use the following code inside the style tag:

<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
</style>

Output:

As we can see, the spaces between the borders are gone. We can align text, add padding, give margins and so on. Ind simple words, padding is the space between between the content and the border, whereas margin is the space outside the border. In order to check the how the table will look after adding the elements, add the following in your code.

<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
th, td
{
padding: 9 px;
text-align: center;
}
</style>

Try adding margin and other format to the table. We will continue with some more features of tables in the next practice.

Advertisements

3 thoughts on “HTML5 Basics–Practice 11

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