Scribd
Upload
11 views

Ecom lab 2

The document provides an overview of HTML tables, lists, and iframes, detailing how to create and format them using various HTML tags and CSS properties. It explains the structure of tables, including table cells, rows, headers, and captions, as well as unordered, ordered, and description lists. Additionally, it covers the use of iframes to embed web pages within other web pages, including how to set their dimensions.

Uploaded by

AnSh BS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Ecom lab 2

The document provides an overview of HTML tables, lists, and iframes, detailing how to create and format them using various HTML tags and CSS properties. It explains the structure of tables, including table cells, rows, headers, and captions, as well as unordered, ordered, and description lists. Additionally, it covers the use of iframes to embed web pages within other web pages, including how to set their dimensions.

Uploaded by

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

E-Commerce lab

Aakansha
Priyanka Yadav
HTML Tables

 HTML tables allow web developers to arrange data into rows and columns.
 A table in HTML consists of table cells inside rows and columns.
Example: A simple HTML table
Table Cells
Each table cell is defined by a <td> and a </td> tag. And td
stands for table data. Everything between <td> and </td> is the
content of a table cell.
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag. tr
stands for table row.
HTML Table Borders
 HTML tables can have borders of different styles and shapes.
 To add a border, use the CSS border property on table, th, and td
elements:
Collapsed Table Borders
 To avoid having double borders like in the example above, set the
CSS border-collapse property to collapse.
 This will make the borders collapse into a single border:
HTML Table Headers

 HTML tables can have headers for each column or row, or for many
columns/rows.
 Table headers are defined with th elements. Each th element
represents a table cell.
 Vertical Table Headers- To use the first column as table headers,
define the first cell in each row as a <th> element.
 Align Table Headers: By default, table headers are bold and
centered
 Example
th {
text-align: left;
}
Example
 For Vertical
Table Caption
 You can add a caption that serves as a heading for the entire table.
 Example
<table style="width:100%">
<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>
 To add a caption to a table, use the <caption> tag:
HTML Lists
 HTML lists allow web developers to group a set of
related items in lists.
 Unordered HTML List: An unordered list starts with
the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small
black circles) by default.
 Ordered HTML List : An ordered list starts with the
<ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by
default.
Example:
HTML Description Lists

 HTML also supports description lists.


 A description list is a list of terms, with a description of each term.
 The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term.
Ordered HTML List - The Type Attribute
 The HTML <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
 The type attribute of the <ol> tag, defines the type of the list item marker:
HTML List Tags
HTML Iframes

 An HTML iframe is used to display a web page within a web page.


 The HTML <iframe> tag specifies an inline frame.
 An inline frame is used to embed another document within the
current HTML document.
 <iframe src="url" title="description"></iframe>
Iframe - Set Height and Width

 Use the height and width attributes to specify the size of the iframe.
 The height and width are specified in pixels by default:
 Or you can add the style attribute and use the CSS height and width
properties:
 <iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe - Set Height and Width

You might also like