Scribd
Upload
40 views29 pages

Lab Manual No 02

The document discusses various HTML tags that can be added to the <head> section of an HTML document, including <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. It provides examples of how to use these tags and what purpose they each serve. It also covers internal and external CSS styling and various CSS properties that can be used to style HTML elements, such as font, color, size, background color, text alignment and more.

Uploaded by

Muhammad Shafi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
40 views29 pages

Lab Manual No 02

The document discusses various HTML tags that can be added to the <head> section of an HTML document, including <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. It provides examples of how to use these tags and what purpose they each serve. It also covers internal and external CSS styling and various CSS properties that can be used to style HTML elements, such as font, color, size, background color, text alignment and more.

Uploaded by

Muhammad Shafi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 29

UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA

FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING


COMPUTER ENGINEERING DEPARTMENT

MAD

Introduction to HTML

PART II

Dated:

19th September, 2022 to 23th September, 2022

Semester:
Autumn 2022

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

HTML <head>:-

The head Element:-


The head element contains information about the page, but no information that will be displayed
on the page itself. For example, it contains the title element, which tells the browser what to
display in its title bar (the title bar is the very top part of the browser window—the part with
minimize, maximize and close buttons):

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>,
<noscript>, and <base>.

Example:-
<head>
<title>HTML Basic tags</title>

<meta name="Keywords" content="HTML, Web Pages" />


<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tutorialspoint.com" />

<link rel="stylesheet" type="text/css" href="tp.css" />


<script type="text/javascript">

_uacct = "UA-232293";

urchinTracker();

</script>

</head>

The <title> Element:


You should specify a title for every page that you write inside the <title> element. This element
is a child of the <head> element). It is used in several ways:
It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers such as IE and Netscape.
It is used by search engines that use its content to help index pages.

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

Therefore it is important to use a title that really describes the content of your site. The <title>
element should contain only the text for the title and it may not contain any other elements.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Example:-
<!DOCTYPE html>

<html>

<head>

<title>My first HTML page</title>

</head>

<body>

<p>The content of the body element is displayed in the browser.</p>

<p>The content of the title element is displayed in the browser's


title.</p>

</body>

</html>

The HTML <base> Element:-

The <base> tag specifies the base URL/target for all relative URLs in a page:

<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

Example:-
<!DOCTYPE html>
<html>
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>

<body>

<img src="stickman.gif" width="24" height="39"> - Notice that we


have only specified a relative address for the image. Since we
have specified a base URL in the head section, the browser will
look for the image at
"http://www.w3schools.com/images/stickman.gif"
<br><br>

<a href="http://www.w3schools.com">W3Schools</a> - Notice that


the link opens in a new window, even if it has no
target="_blank" attribute. This is because the target attribute
of the base element is set to "_blank".

</body>
</html>

The HTML <link> Element:-


The <link> tag defines the relationship between a document and an external resource. The
HTML link element is very similar to the HTML element because it's used to link a document to
other resources. But unlike it, the HTML link element can only be defined in the head section of
the document (HTML head element) and is used to provide global relational information about
the document.

For example, authors can link to a document that acts as index for the current document, to an

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

alternate version in other language, or an alternate version designed for other media (e.g., a
printer).

A particular and very common use for the HTML link tag is to provide an external style sheets
file for the document.

The <link> tag is most used to link to style sheets:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The HTML <style> Element:-

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser:

<head>
<style type="text/css">
body {background-
color:yellow;} p {color:blue;}
</style>
</head>

The HTML <meta> Element:-

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be
displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the
document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search
engines (keywords), or other web services.

<meta> tags always go inside the <head> element.

<html>
<head>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<title>Car rental in New York</title> <meta


name="Author" content="Jhon Doe" />
<meta name="keywords" lang="en" content="car, rental, rent" />
<meta name="keywords" lang="es" content="autos, alquiler, alquila" />
<meta name="description" lang="en" content="Car rental in New York. Cheap
prices best insurance. Call now 999-NO-NUMBER." />
<meta http-equiv="expires" content="Mon, 20 Sep 2006 11:09:00 GMT" />
</head>
<body>
Contents...
</body>
</html>

HTML Styles – CSS:-


CSS (Cascading Style Sheets) is used to style HTML elements.

Styling HTML with CSS:-

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

 Inline - using the style attribute in HTML elements


 Internal - using the <style> element in the <head> section
 External - using an external CSS file

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

Example:-
<!DOCTYPE html>

<html>

<head>

<style type="text/css">

h1 {color:red;}

h2 {color:blue;}

p {color:green;}

</style>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

</head>

<body>

<h1>All header 1 elements will be red</h1>

<h2>All header 2 elements will be blue</h2>

<p>All text in paragraphs will be green.</p>

</body>

</html>

Inline Styles:-

An inline style can be used if a unique style is to be applied to one single occurrence of an
element.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example below shows how to change the text color and the left margin of a
paragraph:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML Style Example - Background Color:-

The background-color property defines the background color for an element:

<!DOCTYPE
html> <html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2> <p
style="background-color:green;">This is a paragraph.</p>
</body>

</html>

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in
an element:

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

Example:-

<!DOCTYPE
html> <html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A
paragraph.</p> </body>

</html>

HTML Style Example - Text Alignment:-

The text-align property specifies the horizontal alignment of text in an element:

Example:-
<!DOCTYPE
html> <html>

<body>
<h1 style="text-align:center;">Center-aligned
heading</h1> <p>This is a paragraph.</p>
</body>

</html>

Internal Style Sheet:-

An internal style sheet can be used if one single document has a unique style. Internal styles
are defined in the <head> section of an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
body {background-
color:yellow;} p {color:blue;}
</style>
</head>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

External Style Sheet:-

An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside the <head> section:

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css"> </head>

Deprecated Tags and Attributes:-

In HTML 4, several tags and attributes were used to style documents. These tags are not
supported in newer versions of HTML.

Avoid using the elements: <font>, <center>, and <strike>, and the attributes: color and bgcolor.

HTML Images:-
HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<img src="url" alt="some_text">

The URL points to the location where the image is stored. An image named "boat.gif", located in
the "images" directory on "www.w3schools.com" has the
URL:http://www.w3schools.com/images/boat.gif.

The browser displays the image where the <img> tag occurs in the document. If you put
an image tag between two paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

HTML Images - Set Height and Width of an Image:-

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

Tip: It is a good practice to specify both the height and width attributes for an image. If these
attributes are set, the space required for the image is reserved when the page is loaded. However,
without these attributes, the browser does not know the size of the image. The effect will be that
the page layout will change during loading (while the images load).

Basic Notes - Useful Tips:-

Note: If an HTML file contains ten images - eleven files are required to display the page right.
Loading images takes time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment that actually gets the image
from a web server and inserts it into the page. Therefore, make sure that the images actually stay
in the same spot in relation to the web page, otherwise your visitors will get a broken link icon.
The broken link icon is shown if the browser cannot find the image.

Example:-

<!DOCTYPE html>

<html>

<body>

<p>

An image:

<img src="smiley.gif" alt="Smiley face" width="42"


height="42"></p>

<p>

</body>

</html>
Computing Fundamental Lab Instructor:-Adnan Mustafa
Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

Insert images from different locations

<!DOCTYPE html>

<html>

<body>

<p>An image from another folder:</p>

<img src="/images/chrome.gif" alt="Google Chrome" width="33"


height="32"><p>An image from W3Schools:</p>

<img src="http://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com" width="104" height="142">

</body>

</html>

Let an image float to the left and to the right:-

<!DOCTYPE html>

<html>

<body>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:left"


width="42" height="42"> A paragraph with an image. The image
will float to the left of this text.

</p>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:right"


width="42" height="42"> A paragraph with an image. The image
will float to the right of this text.

</p>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<p><b>Note:</b> Here we have used the CSS "float" property to


align the image; as the align attribute is deprecated in HTML 4,
and is not supported in HTML5.</p>

</body>

</html>

Make a hyperlink of an image:-

<!DOCTYPE html>

<html>

<body>

<p>Create a link of an image:

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial"


width="42" height="42"></a></p>

<p>No border around the image, but still a link:

<a href="default.asp">

<img style="border:0;" src="smiley.gif" alt="HTML tutorial"


width="42" height="42"></a></p>

</body>

</html>

HTML Image Tags


Tag Description

<img> Defines an image

<map> Defines an image-map

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<area> Defines a clickable area inside an image-map

HTML Tables:-
HTML Table Example:

First Name Last Name Points

Jill Smith 50

Eve Jackson 94

John Doe 80

Adam Johnson 67

Example:-
<!DOCTYPE html>

<html>

<body>

<p>

Each table starts with a table tag.

Each table row starts with a tr tag.

Each table data starts with a td tag.

</p>

<h4>One column:</h4>

<table border="1">

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<tr>

<td>100</td>

</tr>

</table>

<h4>One row and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

</tr>

</table>

</body>

</html>

HTML Tables:-

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the
<td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain
text, links, images, lists, forms, other tables, etc.

Table Example
<table
border="1"> <tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute:-

If you do not specify a border attribute, the table will be displayed without borders. Sometimes
this can be useful, but most of the time, we want the borders to show.

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

To display a table with borders, specify the border attribute:

<table
border="1"> <tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML Table Headers:-

Header information in a table are defined with the <th> tag.

All major browsers display the text in the <th> element as bold and centered.

<table
border="1"> <tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in your browser:

Header 1 Header 2

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Examples:-

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

Tables without borders:-


How to create tables without borders.

<!DOCTYPE html>

<html>

<body>

<h4>This table has no borders:</h4>


<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<h4>And this table has no borders:</h4>

<table border="0">

<tr>

<td>100</td>

<td>200</td>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

Table headers:-
How to create table headers.

<!DOCTYPE html>

<html>

<body>

<h4>Table headers:</h4>

<table border="1"> <tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 855</td>

</tr>

</table>

</body>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

</html>

Table with a caption:-


How to add a caption to a table.

<!DOCTYPE html>

<html>

<body>

<table border="1">

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$50</td>

</tr>

</table>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

</body>

</html>

Table cells that span more than one row/column:-


How to define table cells that span more than one row or one column.

<!DOCTYPE html>

<html>

<body>

<h4>Cell that spans two

columns:</h4> <table border="1">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<table border="1">

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77
855</td> </tr>

</table>

</body>

</html>

Tags inside a table:-


How to display elements inside other elements.

<!DOCTYPE html>

<html>

<body>

<table border="1">

<tr>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<table

border="1"> <tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

Cell padding:-
How to use cell padding to create more white space between the cell content and its borders.

<!DOCTYPE html>
<html>

<body>

<h4>Without cellpadding:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

</table>

<h4>With cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

Cell spacing:-
How to use cell spacing to increase the distance between the cells.

<!DOCTYPE html>

<html>

<body>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<h4>Without cellspacing:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cellspacing="0":</h4>

<table border="1" cellspacing="0">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<h4>With cellspacing="10":</h4>

<table border="1" cellspacing="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

HTML Table Tags


Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer
UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA
FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING
COMPUTER ENGINEERING DEPARTMENT

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Computing Fundamental Lab Instructor:-Adnan Mustafa


Session:-2K19 Computer

You might also like