29042023.pptx

HTML Tables and Forms
Dr Srinivasa Gowda GK
Professor
Department of Computer Science
ACS College of Engineering ,Bangalore-5600027

2. Introducing Tables
● Basic Table Structure
● Table tags and attributes Table caption
1.Introduction
● Explanation of HTML Tables and
Forms
● Importance of Tables and Forms

3.Introducing Forms
● Basic Form Structure
● Form tags and attributes ption
2.Styling Tables
● Applying CSS to Tables
● CSS Table Properties
● Table borders, padding and spacing

5. Form Control Elements
● Textboxes, Password fields, and Text areas
● Radio buttons and Checkboxes
● Drop-down menus and Select boxes
● Buttons and Submitting Forms

● Textboxes, Password fields, and Text areas
● Radio buttons and Checkboxes
● Drop-down menus and Select boxes
● Buttons and Submitting Forms

7.Microformats
● Introduction to Microformats
● Advantages of Microformats in Tables and Forms

8. Advanced CSS: Layout
● Normal Flow
● Positioning Elements
● Floating Elements
9. Constructing Multicolumn Layouts
● Creating multicolumn layouts with CSS
● Advantages of multicolumn layouts
10. Approaches to CSS Layout
● CSS Grids
● CSS Flexbox

11. Responsive Design
● Responsive Design with CSS
● Media Queries
12. CSS Frameworks
● Introduction to CSS Frameworks
● Advantages and disadvantages of using CSS Frameworks
13. Conclusion
● Summary of key points
● Future of HTML Tables and Forms
● Additional Resources

Introduction
Explanation of HTML Tables and Forms
● HTML Tables and Forms are essential components of modern web development.
● HTML Tables are used to display data in a tabular format, with rows and columns.
● HTML Forms are used to collect user input, such as text, numbers, and selections.
● Both Tables and Forms can be styled using CSS to improve their appearance and functionality.
● Tables and Forms are important for organizing and presenting information on websites.
● They are used in a wide range of web applications, including e-commerce sites, data management systems, and user registration
pages.
● Tables and Forms play a critical role in creating accessible websites, allowing people with disabilities to navigate and interact with
web content.

1. Introducing Tables
2. Styling Tables
3. Introducing Forms
5. Table and form Accessibility
6. Microformats
Topics to be discussed in module 2
From:
Dr Srinivasa Gowda GK
Professor
ACS College of Engineering,Bangalore.

Introducing HTML Tables and Forms
➔ HTML Tables and Forms are essential components of modern web
development.
➔ A table in HTML is created using the HTML elements and it can be used
to represent information that exists in a two-dimensional grid.
➔ Tables can be used to display calendars, financial data, pricing tables,
and many other types of data.
➔ HTML table can contain any type of data: like numbers, text, images,
forms, even other tables.

here's an example with an illustration:
Let's say you're developing a website for a
local library. One of the pages on the website
is a list of all the books in the library's
collection. To display this information in a
clear and organized way, you could use an
HTML Table.
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Classic</td>
<td>Available</td>
</tr>
<tr>
<td>To Kill a
Mockingbird</td>
<td>Harper Lee</td>
<td>Classic</td>
<td>Unavailable</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>Dystopian</td>
<td>Available</td>
</tr>
</tbody>
</table>
Here's an example HTML code for a
simple book list table:
As you can see, the HTML Table clearly
displays the book titles, authors, genres,
and availability in a neat and organized
way. This makes it easy for users to find the
books they're interested in and see whether
they're available or not. Without an HTML
Table, the book list could be much harder to
read and navigate, making it a less effective
tool for the library's website visitors.

Basic Table Structure
) as shown in
Figure 1.1.
● HTML contains any number of
rows(); each row contains any
number of table data cells (<td>)
as shown in Figure 1.1.
● Some browsers do not display borders for
the table by default; however, we can do
so via CSS. Many tables will contain
some type of headings in the first row.
● In HTML, we indicate header data
by using <th> instead of the
<td>element as shown in Figure 1.2,
because browsers tend to make the
content within a <th>element bold,
but this can also be done by CSS.
The main reason we shouldn’t use the <th>
element is, due to presentation reasons.
Rather, we should also use the <th> element for
accessibility reasons and for search engine
optimization reasons.
Figure 1.1: Basic Table Structure

Figure 1.2: Adding table heading

● HTML Tables are used to display data in
a tabular format, with rows and columns
Let's say you're building a website
for a sports team, and you want to
display the team's schedule in a
clear and organized way. To do this,
you could use an HTML Table.
<table>
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>March 1</td>
<td>Seattle Seahawks</td>
<td>Home</td>
</tr>
<tr>
<td>March 8</td>
<td>Los Angeles Chargers</td>
<td>Away</td>
</tr>
<tr>
<td>March 15</td>
<td>San Francisco 49ers</td>
<td>Away</td>
</tr>
</tbody>
</table>
simple sports team table:
As you can see, the HTML Table displays the
team's schedule in a tabular format, with
each game listed in a row and the game
details (date, opponent, and location) in
columns. This makes it easy for fans to see
the team's upcoming games and plan
accordingly. Without an HTML Table, the
schedule could be less clear and more
difficult to read, potentially leading to
confusion among fans.

Two key features about
tables are:
The first is that all content
must appear within the
<td> or <th> container.
The second is that each
row must have the same
number of <td> or <th>
containers.
There is a way to change
this second
behavior/feature.
o i.e., If we want a given
cell to cover several
columns or rows, then we
can do so by using the
colspan (Figure 1.3) or
rowspan attributes
(Figure 1.4).
Spanning Rows and Columns
Figure 1.3: Spanning Columns

Figure 1.4: Spanning rows

● The <caption> element is used to provide a brief title or description of the table, which improves
the accessibility of the table, and is strongly recommended.
● We can use the caption-side CSS property to change the position of the caption below the table.
● The <thead>, <tfoot>, and <tbody> elements tend in practice to be used quite infrequently but
make some sense for tables with a large number of rows.
● With CSS, one could set the height and overflow properties of the <tbody>element so that its
content scrolls, while the header and footer of the table remain always on screen.
● The <col> and <colgroup> elements are also mainly used to aid in the eventual styling of the table.
Rather than styling each column, we can style all columns within a <colgroup> with just a single
style.
● The only properties we can set via these two elements are borders, backgrounds, width, and
visibility, and only if they are not overridden in a <td>, <th>, or <tr> element.
Additional Table Elements

Additional Table Elements
Figure 1.5: Additional table elements

● HTML tables were frequently used to create page layouts. Since
HTML block-level elements exist on their own line, tables were
embraced by developers in the 1990s as a
● way to get block-level HTML elements to sit side by side on the
same line as shown in Figure 1.6.
Using Tables for Layout
Figure 1.6: Example of using
tables for layout

Problems:
1. It dramatically increase the size of the HTML document, so takes longer time to download and
maintainability is difficult as it has many table elements.
2. The resulting markup is not semantic because tables are meant to indicate the
tabular data but if we use table elements to align the block-elements side by side means we are
giving presentation rather than semantic.
1. Using tables for layout results in a page that is not accessible, meaning that for users who rely
on software to voice the content, table-based layouts can be extremely uncomfortable and
confusing to understand. It is much better to use CSS for layout.

Introducing Forms
● Forms provide an alternative way to interact with a web server. Forms provide
a much richer mechanism.
○ Using a form, the user can enter text, choose items from lists, and click
buttons. Typically, programs running on the server will take the input
from HTML forms and do something with subsequent HTML based on
that input.
● There were controls for entering text, controls for choosing from a list, buttons,
checkboxes, and radio buttons.
● HTML5 has added a number of new controls as well as more customization
options for the existing controls.
Form Structure
A form is constructed in HTML in the same manner as tables or lists: i.e.,
using special
HTML elements (<form>).
Figure 1.10 illustrates a typical HTML form. The form is defined by a
<form> element,
which is a container for other elements that represent the various input
elements within the form as well as plain text and almost any other
HTML element.

Figure 1.10: Simple HTML form
Figure 1.10: Simple HTML form

● While forms are constructed with
HTML elements, a form also requires
some type of server-side resource
that processes the user’s form input
as shown in Figure 1.11.
● The process begins with a request for
an HTML page that contains some
type of form on it. This could be
something as complex as a user
registration form or as simple as a
search box.
● After the user fills out the form, there
needs to be some mechanism for
submitting the form data back to the
server. This is achieved via a submit
button, but through JavaScript, it is
possible to submit form data using
some other type of mechanism.
● Because interaction between the
browser and the web server is
governed by the HTTP protocol, the
form data must be sent to the server
via a standard HTTPrequest.
How Forms
Work
Figure 1.11: how forms work

Query Strings
● A query string is a series of name=value pairs separated by ampersands (the&character).
● Each form element (i.e., the first<input> elements and the <select> element) contains a name
attribute, which is used to define the name for the form data in the query string.
● The values in the query string are the data entered by the user. Figure 1.12 illustrates how
● the form data (and its connection to form elements) is packaged into a query string.
● Query strings have certain rules defined by the HTTP protocol. Certain characters such as spaces,
punctuation symbols, and foreign characters cannot be part of a query string.
Figure 1.12: Query string data and
its connection

● Two important attributes that are essential features of any form, namely the action and the method attributes.
● The action attribute specifies the URL of the server-side resource that will process the
● form data. This could be a resource on the same server as the form or a completely different server.
● We will be using PHP pages to process the form data. There are other server technologies, each with their own
extensions, such as ASP.NET (.aspx), ASP (.asp), and JavaServer Pages (.jsp).
● The method attribute specifies how the query string data will be transmitted from the browser to the server.
● There are two possibilities: GET and POST. The difference GET and POST resides in
● where the browser locates the user’s form input in the subsequent HTTP request.
● With GET, the browser locates the data in the URL of the request; with POST, the form data is located in the
HTTP header after the HTTP variables.
● Figure 1.14 illustrate show the two methods differ. Table 1.1 lists the key advantages and
● disadvantages of each method. Generally, form data is sent using the POST method.
● The GET method is useful when we are testing or developing a system, since you can
● examine the query string directly in the browser’s address bar. Since the GET method uses the URL to transmit
the query string,
The <form> Element

Form data will be saved when the
user bookmarks a page, which may
be desirable, but is generally a
potential security risk. And
needless to say, any time
passwords are being transmitted,
they should be transmitted via the
POST method.
Figure 1.14: GET versus
POST

Table 1.1: GET versus POST Table 1.2: Form-Related HTML Elements

Table 1.3: Text Input Controls

Figure 1.15 illustrates the various
text element controls and some
examples of how they look in
selected browsers.
Figure 1.15: Text input controls

Figure 1.16: Using the pattern
attribute
Choice Controls
Forms often need the user to select
an option from a group of choices.
HTML provides several ways to do
this.

Select Lists
The <select> element is used to create a multiline box for selecting
one or more items. The options can be hidden in a dropdown list or
multiple rows of the list can be visible.
Option items can be grouped together via the <optgroup> element.
The selected attribute in the <option> makes it a default value.
These options can be seen in Figure 1.17.
Figure 1.17: Using the <select>
element

The value attribute of the <option>
element is used to specify what
value will be sent back to the
server in the query string when that
option is selected.
The value attribute is optional; if it
is not specified, then the text within
the container is sent instead, as
can be seen in Figure 1.18.
Figure 1.18: The value attribute

Radio Buttons
Radio buttons are useful when we want the user to select a single item from a
small list of choices and we want all the choices to be visible.
As can be seen in Figure 1.19,radio buttons are added via the <input
type="radio"> element.
The buttons are made mutually exclusive (i.e., only one can be chosen) by sharing
the
same name attribute.

The checked attribute is used to
indicate the default choice, while
the value attribute works in the
same manner as with the <option>
element.
Figure 1.19: Radio buttons

Checkboxes
Checkboxes are used for getting
yes/no or on/off responses from the
user. As can be seen in Figure
1.20, checkboxes are added via the
<input type="checkbox">element.
We can also group checkboxes
together by having them share the
same name attribute. Each
checked checkbox will have its
value sent to the server. Like with
radio buttons, the
checked attribute can be used to
set the default value of a checkbox.
Figure 1.20: Checkbox buttons
Button Controls
HTML defines several different
types of buttons, which are shown
in Table 1.4. As can be seen in
that table, there is some overlap
between two of the button types.
Figure 1.21
demonstrates some sample button
elements.

Figure 1.21: Example button
elements

Specialized Controls
There are two important additional special-purpose form controls that are available in all browsers.
The specialized form control is the <input type="file"> element, which is used to upload
a file from the client to the server.
The usage and user interface for this control are shown in Figure 1.22.
Notice that the <form> element must use the post method and that it must include the
enctype="multipart/form-data" attribute as well.
As we have seen in the section on query strings, form data is URL encoded (i.e.,
enctype="application/x-www-form-urlencoded"). However, files cannot be transferred to the server using
normal URL encoding, hence the need for the alternative enctype attribute.
Figure 1.22: File upload control
(in Chrome)

Number and Range
When input via a standard text
control, numbers typically
require validation to ensure that
the user has entered an actual
number and, because the range
of numbers is infinite, the
entered number has to be
checked to ensure it is not too
small or too large.
The number and range controls
provide a way to input numeric
values that eliminate the need
for client-side numeric validation
(for security reasons you would
still check the

Form Control Elements
Despite the wide range of different form input types in HTML5, there are only a relatively small
number of form-related HTML elements, as shown in Table 1.2.
Text Input Controls
Most forms need to gather text information from the user.
Whether it is a search box, or a login form, or a user registration form, some type of text input is
usually necessary.

● HTML Forms are used to collect user input,
such as text, numbers, and selections.
Let's say you're creating a registration
page for an upcoming event. To
collect user information, such as their
name, email, and ticket type, you
could use an HTML Form.
<form>
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required><br><br>
<label for="ticket-type">Ticket
Type:</label>
<select id="ticket-type" name="ticket-type"
required>
<option value="">--Select
Ticket Type--</option>
<option
value="general">General
Admission</option>
<option
value="vip">VIP</option>
<option
value="backstage">Backstage Pass</option>
</select><br><br>
<input type="submit" value="Register">
simple event registration form:
As you can see, the HTML Form includes
input fields for the user's name and email,
as well as a dropdown menu for selecting
their ticket type. The "required" attribute
ensures that users must fill out all fields
before submitting the form. Without an
HTML Form, collecting user information
would be more difficult and potentially
prone to errors.

Both Tables and Forms can be styled using CSS to
improve their appearance and functionality.
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
Cocode without
CSS

Both Tables and Forms can be styled using CSS to
improve their appearance and functionality.
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid
#ddd;
}
th {
background-color: #f2f2f2;
color: #444;
}
tr:nth-child(even) {
}
tr:hover {
background-color: #ddd;
}
code with CSS
in this example, the CSS code sets the border-collapse
property to collapse, which removes the spacing between
table cells. It also sets the width of the table to 100%.
The th and td elements are styled to have padding, left-
aligned text, and a bottom border with a color of #ddd. The
th elements are further styled with a background color of
#f2f2f2 and a text color of #444.
The tr:nth-child(even) selector is used to style every other
row with a background color of #f2f2f2, creating a striped
effect. The tr:hover selector is used to highlight rows when
the user hovers over them with a background color of
#ddd.
Overall, these CSS styles make the table more visually
appealing and easier to read by providing clear separation
between rows and columns and highlighting important

V.Tables and Forms are important for
organizing and presenting information on
websites.
Let's say you're creating a website for a
university and you want to provide a course
catalog for students. To present this
information in an organized and easily
navigable way, you can use an HTML Table.
<table>
<thead>
<tr>
<th>Course Number</th>
<th>Course Name</th>
<th>Instructor</th>
<th>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSC 101</td>
<td>Introduction to Computer
Science</td>
<td>Dr. John Smith</td>
<td>3</td>
</tr>
<tr>
<td>MTH 201</td>
<td>Calculus I</td>
<td>Dr. Sarah Johnson</td>
<td>4</td>
</tr>
<tr>
<td>ENG 102</td>
<td>Composition II</td>
<td>Prof. Michael Lee</td>
<td>3</td>
</tr>
</tbody>
</table>
Here's an example HTML code for a simple
course catalog table:
As you can see, the HTML Table includes columns for the course
number, course name, instructor, and number of credits. The
table makes it easy for students to browse through the course
offerings and find the information they need. Without an HTML
Table, presenting this information would be less organized and
more difficult to navigate. Similarly, HTML Forms can also be
used to organize and collect information from users on websites.

VII. Tables and Forms play a critical role in creating accessible
websites, allowing people with disabilities to navigate and interact
with web content.
In this example, the table is designed to be accessible by including
appropriate markup and styles for each element. The "thead" element
contains the table header row, and the "tbody" element contains the table
body rows. The "th" element is used to define table headers, while the "td"
element is used to define table data cells.
The CSS styles for the table ensure that it is easily visible and accessible to
users with visual impairments or mobility impairments. The "table" element
has a width of 100% to ensure that it takes up the full width of its container.
The "border-collapse" property is set to "collapse" to ensure that the table has
a consistent border style.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
<tr>
<td>March</td>
<td>$200</td>
</tr>
</tbody>
</table>
Without css
With css

VII. Tables and Forms play a critical role in creating accessible
websites, allowing people with disabilities to navigate and interact
with web content.
The "th" and "td" elements have a consistent style with a clear padding, font
size, and font weight for easy readability. The "th" elements have a
contrasting background color of #f2f2f2 to distinguish them from the "td"
elements.
Finally, the "th:first-child" and "td:first-child" selectors are used to remove the
left padding from the first column, while the "th:last-child" and "td:last-child"
selectors are used to remove the right padding from the last column.
Overall, this accessible table is designed to be easy to use and navigate for all
users, including those with disabilities.
table {
width: 100%;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 2px solid #ddd;
}
th {
font-size: 1.2em;
font-weight: bold;
}
th:first-child, td:first-child {
padding-left: 0;
}
th:last-child, td:last-child {
padding-right: 0;
CSS CODE

here's a list of techniques, tools, and applications that can be used to create effective tables and forms:
1. Advanced CSS layouts: CSS provides a variety of layout and positioning tools, such as CSS grid and flexbox, that can be used
to create complex and dynamic table and form layouts.
2. Responsive design: With the increasing use of mobile devices to access the web, it's important to ensure that tables and
forms are responsive and easily usable on smaller screens. Techniques such as media queries and fluid layouts can be used
to create responsive tables and forms that adjust to different screen sizes.
3. CSS frameworks: CSS frameworks such as Bootstrap and Foundation provide pre-built styles and components for creating
tables and forms, making it easier to create consistent and effective designs quickly.
4. JavaScript libraries: JavaScript libraries such as DataTables and Handsontable provide advanced features such as sorting,
filtering, and pagination for tables. Libraries like jQuery and React can also be used to create dynamic and interactive forms.
5. Accessibility techniques: To ensure that tables and forms are accessible to users with disabilities, techniques such as using
appropriate markup (e.g. "thead" and "tbody" elements) and providing clear labels for form fields can be used.
6. Data visualization tools: For tables with large amounts of data, data visualization tools such as charts and graphs can be used
to present the data in a more visually appealing and easy-to-understand format.
7. Database management systems: For more complex applications, database management systems such as MySQL and
PostgreSQL can be used to store and manage data for tables and forms.
Overall, there are a variety of techniques, tools, and applications available to create effective tables and forms, and choosing the
right combination for your project depends on your specific needs and goals.

IMPORTANCE OF TABLES AND FORMS
Tables and forms are important components of web design as they allow users to interact with web content in meaningful ways. Here
are some reasons why tables and forms are important:
1. Data organization: Tables are used to organize and present data in a clear and organized manner, making it easier for users to
understand and analyze information.
2. Input collection: Forms are used to collect information from users, such as login details, contact information, and survey
responses. Forms provide a structured way of collecting data, ensuring that all necessary information is gathered.
3. Accessibility: Tables and forms play a critical role in creating accessible websites, allowing people with disabilities to navigate
and interact with web content. For example, using semantic HTML to create tables and forms with appropriate labels and input
types can make it easier for users with visual impairments to understand and interact with the content.
4. Responsive design: Tables and forms can be styled using CSS to create responsive designs that adapt to different screen sizes
and devices. This is important as more and more users access the web using mobile devices.
5. User experience: Well-designed tables and forms can improve the user experience by making it easier for users to find and
interact with the content they need. A user-friendly interface can also improve conversion rates, leading to better business
outcomes.

<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td>$10.00</td>
<td>2</td>
<td>$20.00</td>
</tr>
<tr>
<td>Product B</td>
<td>$15.00</td>
<td>1</td>
<td>$15.00</td>
</tr>
<tr>
<td>Product C</td>
<td>$5.00</td>
<td>4</td>
<td>$20.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>$55.00</td>
</tr>
</tfoot>
</table>
2.Introducing Tables
HTML CODE FOR TABLE STRUCTURE
table {
}
th, td {
border: 1px solid black;
padding: 0.5rem;
}
CSS code
in this example, we're using HTML to
create a basic table structure that
displays product information and
totals. We're also using CSS to style
the table with borders and padding to
improve readability.

in this example, we're using HTML to
create a basic table structure that
displays product information and
totals. We're also using CSS to style
the table with borders and padding to
improve readability.
here are some questions related to basic table structure:
1. What is the purpose of the <table> element?
2. What is the purpose of the <thead>, <tbody>, and <tfoot>
elements?
3. What is the purpose of the <th> element?
4. How can you set the border style for table cells using CSS?
5. How can you set the padding for table cells using CSS?
6. What is the purpose of the colspan attribute?
7. How can you add a caption to a table using HTML?
8. What is the difference between a cell and a row in a table?
9. What are some accessibility considerations when using tables?
10. How can you make a table responsive for different screen sizes

.Table Tags and Attributes
<table> - This tag is used to define a table on a webpage
<table>

</table>
2. <thead> - This tag is used to group header content in a table.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>

</tbody>
</table>

.Table Tags and Attributes
3. <tbody> - This tag is used to group the main content of a table.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>32</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>60</td>
</tr>
</tfoot>
</table>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>32</td>
</tr>
</tbody>
</table>
4.<tfoot> - This tag is used to
group footer content in a table

2.Table Tags
5.<tr> - This tag is used to define a row in a table.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>32</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>32</td>
</tr>
</tbody>
</table>
6.<th> - This tag is used to define
a header cell in a table

2.Table Tags
3. <td> - This tag is used to define a data cell in a table.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr><table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>32</td>
</tr>
</tbody>
</table>
<td>John</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>32</td>
</tr>
</tbody>
</table>

Table Caption
3. The <caption> tag is used to
add a caption to an HTML table.
It is typically placed just after the
<table> tag and before the first
<tr> tag.
In this example, the <caption> tag is used to add the caption
"Employee Information" to the table. When rendered in a web
browser, the caption appears above the table.
Questions:
● Where is the <caption> tag typically placed in relation
to the <table> tag?
● What is the purpose of the <caption> tag in an HTML
table?
<table>
<caption>Employee
Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>$80,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$60,000</td>
</tr>
</table>

3.Styling Tables
● There is certainly no limit to the way one can style a table.
Table Borders
● Borders can be assigned to the <table>, <th> and the <td> element. Interestingly,
borders cannot be assigned to the <tr>, <thead>, <tfoot>, and<tbody> elements.
● This property selects the table’s border model. The default, shown in the second screen
● capture in Figure 1.7.
● In this approach, each cell has its own unique borders. We can adjust the space between
● these adjacent borders via the border-spacing property, as shown in the final screen
capture in Figure 1.7.
● In the third screen capture, the collapsed border model is being used; in this model
adjacent cells share a single border.

Figure 1.7: Styling table borders

Boxes and Zebras
There are different ways to style a table.
● The first of these is a box format, in which we
simply apply background colors and borders in
various ways, as shown in Figure 1.8.
● We can then add special styling to the hover
pseudo-class of the <tr> element, to highlight a
row when the mouse cursor hovers over a cell, as
shown in Figure 1.9.
3.Styling Tables
Figure 1.8: An example boxed table

3.Styling Tables
Figure 1.9 also illustrates how the pseudo-element nth-child can be used to alternate the format of every
second row.
Figure 1.9: Hover effect and
zebra stripes

3.Styling Tables
Applying CSS to Tables
To apply CSS to tables, you can
use selectors to target different
parts of the table and apply
styles as desired. Here is an
example of CSS styles applied
to a table:
<table>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr>
<td>Product A</td>
<td>$50</td>
<td>In Stock</td>
</tr>
<tr>
<td>Product B</td>
<td>$75</td>
<td>Out of Stock</td>
</tr>
<tr>
<td>Product C</td>
<td>$100</td>
<td>In Stock</td>
</tr>
</table>
table {
width: 100%;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
color: #333;
font-weight: bold;
}
}
td:last-child {
text-align: center;
}
HTML
CSS
In this example, the table has a collapsed border, full
width, and each cell has a padding of 12px, left-aligned
text, and a 1px solid border. The table header cells have a
gray background color, bold font weight, and black text
color. Every other row has a light gray background color.
Finally, the last cell in each row is centered.
Questions:
● What CSS property is used to collapse the
border of the table?
● How are the table header cells styled differently
from the regular cells?
● How is every other row styled differently in the
table?

3.Styling Tables
CSS Table Properties
here's an example of how CSS
Table Properties can be used to
style a simple HTML table:
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apples</td>
<td>$2.50</td>
<td>10</td>
</tr>
<tr>
<td>Oranges</td>
<td>$1.75</td>
<td>15</td>
</tr>
<tr>
<td>Bananas</td>
<td>$0.99</td>
<td>20</td>
</tr>
</table>
table {
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
color: #333;
}
}
HTML
CSS
In this example, the border-collapse
property is used to collapse the borders
between table cells. The width property
sets the width of the table to 100% of its
container. The text-align and padding
properties are used to style the table
cells. The background-color property is
used to set the background color of the
header row and alternate rows of the
table. The color property is used to set
the text color of the header row. The nth-
child pseudo-class is used to select
every even row of the table and apply a
background color to it.

3.Styling Tables
Table borders, padding and spacing
here's an example of how table
borders, padding, and spacing can be
adjusted using CSS:
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apples</td>
<td>$2.50</td>
<td>10</td>
</tr>
<tr>
<td>Oranges</td>
<td>$1.75</td>
<td>15</td>
</tr>
<tr>
<td>Bananas</td>
<td>$0.99</td>
<td>20</td>
</tr>
</table>
table {
border-spacing: 0;
padding: 10px;
}
th, td {
padding: 8px;
}
HTML
CSS
In In this example, the border property is
used to add a 1px black border around
the entire table. The border-spacing
property is set to 0 to remove any space
between the cells. The padding property
is set to 10px to add padding around the
entire table.
The border property is also used to add
a 1px black border around each cell in
the table, and the padding property is set
to 8px to add padding inside each cell.
By adjusting these properties, you can
create different visual styles for your
tables, with varying amounts of padding,
border size, and spacing between cells.

3.Introducing Forms
Basic Form Structure
<form>
<label
for="name">Name:</la
bel>
<input type="text"
id="name"
name="name"
required>
<label
for="email">Email:</lab
el>
<input type="email"
id="email"
name="email"
required>
<label
for="message">Messa
ge:</label>
<textarea
id="message"
name="message"
rows="4" cols="50"
required></textarea>
<input type="submit"
value="Submit">
</form>
Finally, there is a
submit button created
using the <input> tag
with a type attribute of
submit and a value
attribute of Submit.
This button allows the
user to submit the
form data to the server
when clicked.
HTML
In this example, the form is created using
the <form> tag. Inside the form, there are
three form fields: a text input for the
name, an email input for the email
address, and a textarea for the message.
Each form field is labeled using the
<label> tag and associated with its
corresponding input element using the
for attribute and id attribute. The
required attribute is added to each input
element to require the user to fill in the
field before submitting the form.

3.Introducing Forms
form tags and attributes
<form action="/submit-form" method="POST">
<fieldset>
<legend>Contact Information</legend>
<input type="text" id="name" name="name" required>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>Shipping Address</legend>
<label for="address1">Address Line 1:</label>
<input type="text" id="address1" name="address1" required>
<label for="address2">Address Line 2:</label>
<input type="text" id="address2" name="address2">
<label for="city">City:</label>
<input type="text" id="city" name="city" required>
<label for="state">State:</label>
<select id="state" name="state" required>
<option value="">-- Select State --</option>
<option value="CA">California</option>
<option value="NY">New York</option>
<option value="TX">Texas</option>
</select>
<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zip" pattern="d{5}" required>
</fieldset>
<fieldset>
<legend>Order Details</legend>
<label for="product">Product:</label>
<input type="text" id="product" name="product" required>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" required>
</fieldset>
<button type="submit">Submit</button>
</form>
HTML
In this example, the <form> tag is used to create the form with the action and method attributes set to
specify where the form data will be submitted and what HTTP method to use.
There are three <fieldset> tags used to group related form fields, with a <legend> tag inside each
one to provide a title for the group.
The form contains several form fields with different input types, including text input, email input,
select dropdown, and number input. Each input field has a corresponding <label> tag associated
with it using the for attribute and id attribute.
Several form attributes are used in this example. The required attribute is added to some fields to
require the user to fill them in before submitting the form. The pattern attribute is used to specify the
format of the zip code input using a regular expression. The min and max attributes are used to set
minimum and maximum values for the quantity input.
Finally, there is a submit button created using the <button> tag with a type attribute of submit. This
button allows the user to submit the form data to the server when clicked.

Textboxes, Password fields, and Text areas
HTML
<form>
<label
for="username">Username:</label>
<input type="text" id="username"
name="username" required>
<label
for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<label
for="description">Description:</label>
<textarea id="description"
name="description" rows="4"
cols="50"></textarea>
<input type="submit" value="Submit">
</form>
In this example, there are three form control elements:
a textbox for the username, a password field for the
password, and a text area for the description.
The type attribute of the textbox and password field
are set to text and password respectively. The required
attribute is added to both fields to require the user to
fill them in before submitting the form.
The type attribute of the text area is not specified as it
defaults to text. The rows and cols attributes are used
to set the size of the text area, and there is no required
attribute added as it is optional.
Finally, there is a submit button created using the
<input> tag with a type attribute of submit and a value
attribute of Submit. This button allows the user to
submit the form data to the server when clicked.

Radio buttons and Checkboxes
HTML
<form>
<fieldset>
<legend>Choose a Payment Method</legend>
<label for="credit-card">
<input type="radio" id="credit-card" name="payment-
method" value="credit-card" checked>
Credit Card
</label>
<label for="paypal">
<input type="radio" id="paypal" name="payment-
method" value="paypal">
PayPal
</label>
<label for="check">
<input type="checkbox" id="check" name="terms-
and-conditions" value="accepted" required>
I accept the terms and conditions.
</label>
</fieldset>
</form>
In this example, there are two radio buttons and one checkbox.
The radio buttons are created using the <input> tag with a type attribute
of radio. Each radio button has a name attribute of payment-method, which
groups them together so that only one can be selected at a time. The
value attribute is used to specify the value of the selected radio button,
and the checked attribute is added to the first radio button to set it as
the default selection. The <label> tag is used to associate each radio
button with its label, which is clickable and activates the corresponding
radio button.
The checkbox is created using the <input> tag with a type attribute of
checkbox. The name attribute is set to terms-and-conditions, and the value
attribute is set to accepted. The required attribute is added to require
the user to accept the terms and conditions before submitting the
form. The <label> tag is used to associate the checkbox with its label,
which is clickable and activates the corresponding checkbox.
Finally, there is a submit button created using the <input> tag with a
type attribute of submit and a value attribute of Submit. This button
allows the user to submit the form data to the server when clicked.

Drop-down menus and Select boxes
HTML
<form>
<fieldset>
<legend>Choose a Payment Method</legend>
<label for="credit-card">
<input type="radio" id="credit-card" name="payment-
method" value="credit-card" checked>
Credit Card
</label>
<label for="paypal">
<input type="radio" id="paypal" name="payment-
method" value="paypal">
PayPal
</label>
<label for="check">
<input type="checkbox" id="check" name="terms-
and-conditions" value="accepted" required>
I accept the terms and conditions.
</label>
</fieldset>
</form>
In this example, there are two select boxes.
The first select box is created using the <select> tag with an
id of country and a name of country. It contains several
<option> tags, each with a value attribute specifying the value
of the option and the text that is displayed to the user.
The second select box is created using the <select> tag with
an id of language and a name of language. It contains two
<optgroup> tags, each with a label attribute that groups the
options together. The options are created using <option> tags,
each with a value attribute specifying the value of the option
and the text that is displayed to the user.
Finally, there is a submit button created using the <input> tag
with a type attribute of submit and a value attribute of Submit.
This button allows the user to submit the form data to the
server when clicked.

Buttons and Submitting Forms
HTML
<form>
<input type="text"
name="name"
placeholder="Enter your name">
<input type="email"
name="email"
placeholder="Enter your email">
<button
type="submit">Submit</button>
<button
type="reset">Reset</button>
</form>
In this example, there are two input fields for name and email, and
two buttons: one for submitting the form and one for resetting the
form.
The submit button is created using the <button> tag with a type
attribute of submit. This button allows the user to submit the form
data to the server when clicked. The text "Submit" is specified
between the opening and closing <button> tags.
The reset button is created using the <button> tag with a type
attribute of reset. This button resets the form back to its initial
state when clicked. The text "Reset" is specified between the
opening and closing <button> tags.
Both buttons are placed inside the <form> tag, which specifies the
form to which they belong. The <input> tags are used to create the
name and email fields, with the type attribute specifying the type of
input and the name attribute specifying the name of the input. The
placeholder attribute is used to provide a hint or example to the
user for what to input in the field.

Table and Form Accessibility
some key points on table and form accessibility in web
design:
● Provide a logical reading order: Use the proper
HTML structure to create a logical reading
order for tables and forms. This helps users
with screen readers understand the content.
● Use headers: For tables, use a header row and
mark it as a header row. For forms, use clear
and descriptive labels for form fields.
● Provide alternative text (Alt Text): Provide Alt
Text for tables and form elements, such as
input fields and buttons, to help users with
visual impairments understand the content.
● Use simple and consistent formatting: Use
simple and consistent formatting for tables
and forms to make them easier to read and
understand.
● Avoid merged or split cells: Avoid using
merged or split cells in tables, as this can
make it difficult for users with screen readers
to understand the content.
● Provide descriptive error messages:
Provide clear and descriptive error
messages for form submissions to
help users understand what went
wrong and how to fix it.
● Use sufficient contrast: Use sufficient
contrast between text and background
to make it easier for users with low
vision to read the content.
● Test for accessibility: Use accessibility
checkers and tools to test for
accessibility and make sure that your
tables and forms are accessible to all
users.
● Stay up to date with accessibility
guidelines: Keep up to date with
accessibility guidelines, such as the
Web Content Accessibility Guidelines
(WCAG), and make sure that your
tables and forms comply with these
guidelines.
● Prioritize accessibility in your design
process: Prioritize accessibility in your
design process to ensure that all users
can access and understand your

Yes, that's correct! Providing a logical reading order is crucial for
table and form accessibility in web design. Screen readers read
content in a linear order, so it's important to structure tables and
forms in a way that makes sense when read aloud. This means using
the proper HTML structure and avoiding unnecessary formatting that
can disrupt the reading order. By providing a logical reading order,
you can ensure that all users, including those with visual impairments
who rely on screen readers, can access and understand your content.

Sure, here are some examples of how to use headers and labels for table and form accessibility:
Example 1: Headers for Tables
<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">In Stock?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget A</td>
<td>$10.00</td>
<td>Yes</td>
</tr>
<tr>
<td>Widget B</td>
<td>$15.00</td>
<td>No</td>
</tr>
</tbody>
</table>
In this example, we use the <thead> element to define the header row of the table, and we use the <th> element to mark each header cell as a header cell.
This helps users with screen readers understand the structure of the table and the meaning of each column.

Example 2: Labels for Forms
<form>
<input type="text" id="name" name="name"><br><br>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
</form>
In this example, we use the <label> element to create a clear and descriptive label for each form field. The "for" attribute of the
<label> element matches the "id" attribute of the form field, which helps users with screen readers understand the purpose of

here are some examples of how to provide alternative text for tables and form elements:
Example 1: Alternative Text for Tables
<table>
<caption>Employee Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Accounting</td>
<td>$50,000</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Marketing</td>
<td>$60,000</td>
</tr>
</tbody>
</table>
In this example, we provide alternative text for the table using the <caption> element. The caption provides a brief description of the content of the table, which helps
users with visual impairments understand the purpose of the table.

Example 2: Alternative Text for Form Elements
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" alt="Enter your username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" alt="Enter your password"><br><br>
<input type="submit" value="Login" alt="Click to log in">
</form>
In this example, we provide alternative text for form elements using the "alt" attribute. The alternative text describes the purpose
of the form element, such as "Enter your username" or "Click to log in". This helps users with visual impairments understand the
purpose of each form element, even if they cannot see it.

3.Styling Tables
Table borders, padding and spacing

29042023.pptx

Recommended

Recommended

More Related Content

Similar to 29042023.pptx

Similar to 29042023.pptx (20)

More from srinivasa gowda

More from srinivasa gowda (11)

Recently uploaded

Recently uploaded (20)

29042023.pptx

Editor's Notes