Tables and Frames

In web development, tables and frames are essential for

displaying structured data and organizing content in a more
interactive and controlled manner. This unit explores how to
create and manipulate tables, work with frames using the
<iframe> tag, and combine forms and tables for structured
data input.
1. Tables in HTML
Tables are used to organize data into rows and columns,
making it easy to present information in a structured
format. HTML provides a set of tags that help define the
structure and layout of tables.
Basic Table Structure
To create a table in HTML, we use the <table> tag. This tag
defines the table structure, while other elements such as
<tr>, <td>, and <th> are used to define rows, cells, and
headers, respectively.
Here is the basic structure of a table:

• <table>: Defines the table container.

• <tr>: Stands for table row, used to define a row in the
table.
• <td>: Stands for table data, used to define the data cell in
a table row.
• <th>: Stands for table header, used to define header cells
(which are bold and centered by default).
Table Attributes
Tables have several useful attributes that can help define their
appearance:
• border: Specifies the width of the table border. It can be
set as a numeric value or by using CSS styles.

• cellpadding: Adds space between the cell content and the

cell border. This helps in making the data more readable.

• cellspacing: Sets the space between cells. Increasing the

value creates more space between the cells.
Merging Cells
Sometimes you need to merge cells to create a more organized
table layout. You can merge cells both horizontally (across
columns) and vertically (across rows).
• colspan: Merges cells horizontally (across columns). It
defines how many columns the cell will span.

• rowspan: Merges cells vertically (across rows). It defines

how many rows the cell will span.
Example Table

In this example, we have a table displaying personal data with

merged cells and custom spacing. The rowspan="2"
attribute merges the "Jake" row across two rows, while
colspan="2" can be used in header rows to span columns.
2. Frames in HTML
Frames allow developers to embed multiple documents
(webpages) within a single web page. The <iframe> tag is
used to embed another webpage within the current
webpage. This is useful when you want to display an
external webpage inside your website, such as embedding a
YouTube video, showing an interactive map, or displaying
another website’s content.
Basic <iframe> Structure

• src: Specifies the URL of the page to embed.

• width and height: Define the dimensions of the iframe.
• frameborder: Determines whether the iframe should
have a border (set to "0" for no border).
Common Attributes for <iframe>
• width and height: Define the size of the embedded
frame.
• frameborder: Controls whether a border is shown around
the iframe (0 for no border, 1 for a border).
• scrolling: Controls whether scrolling is allowed within the
iframe. Options are yes, no, and auto.
 • allowfullscreen: If included, the iframe will support full-
screen mode (commonly used for video embeds).

This embeds a YouTube video in your webpage.

Pros and Cons of Using <iframe>
Advantages of using <iframe>:
• Embedding external content: Iframes allow you to
include content from other websites, such as social media
posts, videos, or maps, directly into your webpage.
• Isolation: The content in the iframe is isolated from the
rest of the page, meaning it doesn’t interfere with the
main page’s layout or functionality.
• Easy to use: Iframes are easy to implement and provide a
simple way to include other content.
Disadvantages of using <iframe>:
• Performance issues: Loading external content inside
iframes can slow down the page load time, especially if
the embedded content is large or contains ads.
• SEO challenges: Search engines may not index the
content inside an iframe properly, potentially limiting SEO
benefits.
 • Security risks: If you are embedding external content
from unreliable sources, it can pose security risks, such as
cross-site scripting (XSS) attacks.

3. Combining Forms and Tables

HTML allows you to combine forms and tables to create
structured data input forms, which are useful for
applications like surveys, registrations, or data entry forms.
Example: Form Inside a Table
In this example:
• The form elements (input fields, radio buttons,
checkboxes) are placed inside a table for better
organization.
• The table structure helps align the form fields and labels
properly.
• The submit button is also placed inside the table, making
the form look neat and well-structured.
Advantages of Using Forms with Tables
• Improved organization: Tables allow the form fields to be
neatly aligned, making them easier for users to interact
with.
• Better visual presentation: Using tables for forms creates
a clean layout that helps separate the labels from the
input fields, improving readability.
• Responsive layout: When combined with CSS, forms
within tables can be made responsive, adapting to
different screen sizes.

Conclusion
In this unit, we’ve covered how to create and manipulate
tables and frames using HTML. Tables are essential for
organizing data into rows and columns, and frames (via
<iframe>) allow you to embed external content like videos
or other web pages into your site. Additionally, combining
forms with tables offers a structured way to collect user
input. By mastering these concepts, you can create more
dynamic and well-structured web pages that improve user
experience and interactivity.