Lecture 4

HTML Layout
An HTML layout is a blueprint used to arrange web pages in a well-defined manner.
It is easy to navigate, simple to understand and uses HTML tags to customize web
design elements. Crucial for any website, an HTML layout that uses the correct
format will easily improve a website’s appearance. Additionally, because HTML
layouts are typically responsive by default, they will also be properly formatted for
mobile devices.
HTML Layout Elements
HTML contains different elements that define the structure of a web page:
<header>:This defines a header for a web page
<nav>: This defines a container for navigation links
<section>: This defines a section in a web page
<article>: This is the primary element that contains information about the web page
<aside>: The <aside> content is often placed as a sidebar in a document
<footer>: This defines a footer for a document or a section
<details>: This is used to define additional details
<summary>: This defines a heading for the <details> element
<header> Tag
The <header> tag specifies a header section for a page or another container.
This element usually presents introductory content.
A <header> element may contain any of the following:

1. logo or icons
2. author information
3. search form
4. navigation links
5. and more..
A page can have multiple <header> elements located in different sections.
A page layout with <header>, <main>, and <footer> sections.
<body>
<header style="padding:30px;background:aliceblue;">
Header section.
</header>
<main style="padding:90px 30px;margin:30px 0;background:aliceblue;">
Main section.
</main>
<footer style="padding:30px;background:aliceblue;">
Footer section.
</footer>
</body>
A <header> inside an <article>
<article>
<header style="padding:20px;
background:aliceblue;">
Article header section
</header>
<p style="padding-left:30px;">Paragraph 1</p>
<footer style="padding:20px;background:aliceblue;"> Article

footer section </footer>
</article>
HTML <nav> Tag
The <nav> tag creates a container for navigation elements.
It can hold navigation menus, quicklinks, table of contents, etc.
<nav>
<a href="javascript:alert('Going to Introduction')">Introduction</a> <br />
<a href="javascript:alert('Going to What Is HTML')">What is HTML</a> <br />
<a href="javascript:alert('Going to HTML Syntax')">HTML Syntax</a> <br />
<a href="javascript:alert('Going to HTML Elements')">HTML Elements</a>
</nav>
HTML table tag is used to display data in tabular form (row * column). There
can be many columns in a row.
We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>,
and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to use
div tag over table to manage the layout of the page .
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each
column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

HTML Border attribute
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
HTML table with caption
HTML caption is diplayed above the table. It must be used after table tag only.
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
What does colspan= do?
Allows a single table cell to span the width of more than one cell or
column.
<table> <caption>Life Expectancy By Current Age</caption>
<tr> <th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th> Life Expectancy By Current Age
<th>Men</th>
<th>Women</th> 65 40 20
<th>Men</th> Men Women Men Women Men Women
<th>Women</th>
</tr> 82 85 78 82 77 81
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr> <
/table>
What does rowspan= do?
Allows a single table cell to span the height of more than one cell or row.
<table>
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th></th>
<th></th>
<th>Bob</th>
<th>Alice</th>
</tr> <tr>
<th rowspan="2">Favorite</th> <th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr> <tr>
<th>Flavor</th> Bob Alice
<td>Banana</td> Color Blue Purple
<td>Chocolate</td> Favorite
</tr> <tr> Flavor Banana Chocolate
<th rowspan="2">Least Favorite</th>
<th>Color</th> Least Color Yellow Pink
<td>Yellow</td> Favorite Flavor Mint Walnut
<td>Pink</td>
</tr> <tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
Table background color
The HTML <table> bgcolor Attribute is use to specify the background color
of a table.
Syntax:
<table bgcolor="color_name | hex_number | rgb_number">
Attribute Values:
color_name: It sets the text color by using the color name. For example “red”.
hex_number: It sets the text color by using the color hex code. For
example “#0000ff”.
rgb_number: It sets the text color by using the rgb code. For example: “RGB(0, 153,
0)” .
Note: The <table> bgcolor Attribute is not supported by HTML 5 instead of using
this we can use CSS background-color property. .
<table border="1"
bgcolor="green">
<caption>
Author Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
<td> bgcolor
Attribute
The HTML <td> bgcolor attribute is used to specify the background color of a table cell. It is not
supported by HTML 5.
Syntax:
<td bgcolor= "color_name | hex_number | rgb_number">
Attribute Values:
color_name: It sets the text color by using the color name. For example “red”.
hex_number: It sets the text color by using the color hex code. For example “#0000ff”.
rgb_number: It sets the text color by using the rgb code. For example: “RGB(0, 153, 0)”.
<tr>
<td bgcolor="green">BITTU</td>
<td bgcolor="red">22</td>
<td bgcolor="yellow">CSE</td>
</tr>
<tr>
<td bgcolor="yellow">RAKESH</td>
<td bgcolor="green">25</td>
<td bgcolor="red">EC</td>
</tr>
HTML <colgroup> Tag
<table>
<colgroup>
<col span="2" style="background-
color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
The <tbody> tag is used to group the
body content in an HTML table.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
To create a nested table, we need to create a table using the <table> tag. This table is known as the
outer table. The second table that will be nested table is called the inner table. This table is also
created using the <table> tag but there is a special thing that must be kept in mind.
Note: The inner table always has to be placed between the <td> ….. </td> of the outer table.
<html>
<body>
<table border="2" bordercolor="green">
<tr>
<td>Table 1</td>
<td> Table 1
<table border="2" bordercolor="blue">
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
<tr>
<td> Table 2 </td>
<td>Table 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> Table 1 </td>
<td> Table 1. </td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h2 style="color:green">Table Example </h2>
<p><b>Nested tables</b></p>
<table border="2" bordercolor="green">

<tr>
<td>main Table row 1 column 1</td>
<td>main Table column 2
<table border="2" bordercolor="blue">
<tr>
<td>inner Table row 1 column 1</td>
</tr>
<tr>
<td>inner Table row 2 column 1 </td>
</tr>
<tr>
<td>inner Table row 3 column 1 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> main Table row 2 column 1 </td>
<td> main Table row 2 column 2 </td>
</tr>
</table>
</body>
</html>

Lecture 4

Uploaded by

Copyright:

Available Formats

Lecture 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 4

Uploaded by

Copyright:

Available Formats

HTML Layout

An HTML layout is a blueprint used to arrange web pages in a well-defined manner.

format will easily improve a website’s appearance. Additionally, because HTML

A <header> element may contain any of the following:

<footer style="padding:20px;background:aliceblue;"> Article

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

<table border="2" bordercolor="green">

You might also like