Scribd
Upload
1 views

Advanced HTML

The document provides an overview of creating and formatting tables in HTML, including the use of <table>, <tr>, <th>, and <td> tags. It explains attributes for table properties such as border, width, height, and background color, as well as merging rows and columns using rowspan and colspan. Additionally, it covers anchor tags for creating hyperlinks and includes examples of HTML code for various table structures and links.

Uploaded by

Sai Pranav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Advanced HTML

The document provides an overview of creating and formatting tables in HTML, including the use of <table>, <tr>, <th>, and <td> tags. It explains attributes for table properties such as border, width, height, and background color, as well as merging rows and columns using rowspan and colspan. Additionally, it covers anchor tags for creating hyperlinks and includes examples of HTML code for various table structures and links.

Uploaded by

Sai Pranav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

ADVANCED HTML

TABLES IN HTML:
 An HTML table is defined with the <table> tag.
 Each table row is defined with the <tr>tag. It contains one or more <th> or <td> elements.
 An HTML table consists of two types of cells: Header cells and Standard cells.
 Header Cells: Contains the header information and is defined with the <th> tag. The text in <th>
element will be bold and centered by default.
 Standard Cells: Contains the data and is defined with the <td> tag. The text in <td> element will be
normal and left aligned by default.
 All the tags used to create a table (<table>, <tr>, <th>, <td>) are container tags.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table border >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Riya</td>
<td>Khan</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Table Properties:
1. Border
The border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not
need a border, then you can use border = "0".
2. Width and Height
You can set a table width and height using width and height attributes. You can specify table width or
height in terms of pixels or in terms of percentage of available screen area.
3. bgcolor
It is used to set background color for the table. If you want to give color only for a particular row, use it
along with the specific <tr>. If you want to give color only for a particular cell, use it along with the
specific <th> or <td>.
Example:
<table border width=200 height=400 bgcolor=”red”>
........
</table>

Merging Rows and Columns in a Table:


The attributes used to merge rows and columns in a table are: Rowspan and colspan
Rowspan – Used to merge two or more rows in a table. It can be used with <td> or <th> only.
Syntax:

<tagname rowspan=”number”></tagname>

Example

<html>
<body>
<h1>HTML rowspan Attribute </h1>
<table border="2">
<tr>
<th>Name</th>
<th>Language</th>
</tr>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td rowspan="2">Elon</td>
<td>Germany</td>
</tr>
<tr>
<td>French</td>
</tr>
</table>
</body> </html>
Output:

Colspan – Used to merge two or more columns in a table. It can be used with <td> or <th> tags.
Syntax

<tagname colspan=”number”></tagname>

Example:

<html>
<body>
<h2>Colspan</h2>
<table border>
<tr>
<th>Domains</th>
<th>Cost</th>
</tr>
<tr>
<td>Product Development</td>
<td>500000</td>
</tr>
<tr>
<td>Marketing</td>
<td>500000</td>
</tr>
<tr>
<td>Maintenance</td>
<td>100000</td>
</tr>
<tr>
<td colspan="2">Total Budget = INR 1300000</td>
</tr>
</table>
</body>
</html>
Output:

ANCHOR TAGS
 Links are found in nearly all web pages. Links allow users to click their way from page to page.
 HTML links are hyperlinks. You can click on a link and jump to another document. When you move
the mouse over a link, the mouse arrow will turn into a little hand.
 A link can be a text, image or any other html element.
 The HTML anchor tag <a>defines a hyperlink.
 Syntax:
<a href="url">link text</a>
 The most important attribute of the <a>element is the href attribute, which indicates the link's
destination.
 The link text is the part that will be visible to the reader.
 Clicking on the link text, will send the reader to the specified URL address.
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Example:
<a href="https://www.google.com/">Visit Google!</a>
 To use an image as a link, just put the <img> tag inside the <a>tag.
Example:
<a href="default.asp">
<img src="smiley.gif">
</a>

PROGRAMS
1. Create the table as shown below:
Answer:
<html>
<body>
<h2>Basic HTML Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
2. Write the html code to insert the table as given below:

Answer:
<html>
<body>
<h2>Bordered Table</h2>
<table border>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

3. Create a webpage to insert the table as given below:

Answer:
<html>
<body>
<table border>
<tr>
<th bgcolor="red">RED</th>
<th bgcolor="green">GREEN</th>
</tr>
<tr>
<th bgcolor="blue">BLUE</th>
<th bgcolor="yellow">YELLOW</th>
</tr>
</table>
</body></html>
4. Rectify the errors in the given program and predict the output:

<body>
<table border>
<td>Aryabatta
<td>Nehru</td>
Rashid</td>
</tr>
</body>

Answer:
<body>
<table border>
<tr>
<td>Aryabatta</td>
<td>Nehru</td>
<td>Rashid</td>
</tr>
</table>
</body>
5. Create a webpage and insert a image of your school that redirects you to your school
website
Answer:
<html>
<body>
<a href="https://ihsdxb.info/"><img src="school.jpg"></a>
</body>
</html>

You might also like