UNIT-4
4. DESIGNING WITH HTML
4.1 Creating a Table
In HTML, tables play a vital role when you need to arrange and display
structured data systematically using rows and columns. Tables make it
easier for users to understand relationships and compare values across
different fields. The table is defined using the <table> tag. Inside a
table, you use <tr> (table row) to create rows, <th> (table header)
to define the heading of each column, and <td> (table data) for the
data cells.
Basic Syntax:
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Tables help organize web content and improve readability, especially
when presenting datasets.
4.1.1 Attributes of Table Tag
The <table> tag comes with multiple attributes that allow you to
control its appearance and behavior on a web page. These attributes
allow customization for a better and more responsive design. Commonly
used attributes include:
border - controls the width of the table's border.
align - controls the horizontal positioning of the table on the
page.
bgcolor - applies a background color to the table.
4.1.2 Table-bordercolor
This attribute allows you to change the border color of your table,
enhancing its look and visibility.
<table border="1" bordercolor="blue">...</table>
Setting a border color can make your table stand out against the
background.
4.1.3 Table-bgcolor
You can apply a background color to the entire table to improve visual
separation or match your site's color scheme.
<table bgcolor="lightgrey">...</table>
This attribute helps highlight important data or improve the aesthetic
appeal.
4.1.4 Align
The align attribute defines the horizontal alignment of the table.
Accepted values are left , center , and right .
<table align="center">...</table>
This ensures that the table fits your page layout correctly.
4.1.5 Cellspacing
cellspacing determines the amount of space between adjacent table
cells. Adding spacing helps the data breathe.
<table cellspacing="10">...</table>
4.1.6 Cellpadding
cellpadding defines the space between the content of a cell and the
cell border. This improves text readability.
<table cellpadding="8">...</table>
4.1.7 Width Setting
The width attribute defines how wide the table should appear on the
page. It can be specified in either percentage or pixels.
<table width="100%">...</table>
This ensures the table scales as desired, especially in responsive
design.
4.1.8 Attribute Values
Attributes often require specific data types as values: numeric
values, pixel units, percentage units, or predefined keywords.
<table border="2" align="center" width="50%">...</table>
4.1.9 Rowspan and Colspan
These attributes allow a cell to span multiple rows ( rowspan ) or
multiple columns ( colspan ), which helps when data in cells should
extend.
<td rowspan="2">Merged Cell</td>
<td colspan="3">Merged Columns</td>
Using these smartly can reduce redundancy in tables.
4.2 Working with Frame
Frames enable you to divide a web page into different sections, each
capable of loading a different HTML document. This lets you design
multipane interfaces.
4.2.1 Frames in HTML
Frames are useful when you want a web page to show more than one
document at once. This is done by defining a <frameset> to split the
page, and each split loads a separate <frame> .
<frameset cols="50%,50%">
<frame src="left.html">
<frame src="right.html">
</frameset>
4.2.2 Uses of Frames
Divide a webpage into different independent sections.
Keep navigation menus fixed while browsing.
Optimize load times by loading content in individual frames.
4.2.3 Rows and Columns
Frames can be organized horizontally using rows or vertically using
cols . This defines the layout split across the window.
<frameset rows="20%,80%">...</frameset>
4.2.4 No Frame
For browsers that don't support frames, the <noframes> tag can provide
alternative content for a better user experience.
<noframes>
Your browser does not support frames.
</noframes>
4.2.5 The <frameset> Tag Attributes
Some common attributes for <frameset> :
rows / cols - define how the window is divided.
border - controls border width around frames.
frameborder - determines visibility of borders.
4.2.6 The <frame> Tag Attributes
A <frame> tag has useful attributes to control content and behavior:
src - path to the HTML file to display.
name - used to target links.
scrolling - allows or prevents scrolling inside the frame.
noresize - prevents the frame from being resized manually.
4.2.7 iframe
An iframe (inline frame) allows embedding another web page inside the
current page, often used for videos, maps, and external resources.
<iframe src="page.html" width="300" height="200"></iframe>
4.2.8 Borders and Iframe
Iframes can have styled borders using inline CSS or external
stylesheets for a clean layout.
<iframe src="page.html" style="border:2px solid black;"></iframe>
4.3 HTML Forms
Forms are essential for collecting user data on websites, whether it’s
login info, search terms, or survey answers. Forms contain input
fields, buttons, checkboxes, and dropdowns.
<form action="submit.php" method="post">
<input type="text" name="username">
<input type="submit">
</form>
4.3.1 Input Tag
The <input> tag creates form fields where users can enter different
types of data. Various types allow tailored input collection:
text - single-line text input.
password - masks user input.
checkbox - multiple selection checkboxes.
radio - single-choice options.
submit - submits the form.
reset - resets the form to initial values.
Example:
<input type="text" name="firstname" placeholder="Enter your name">
This makes your form interactive and user-friendly.
🚀 End of Chapter 4 Notes
Let me know if you'd like me to generate Chapter 5 too!
