Integrating Tables with Forms
Imagine you’re setting up a registration desk at a conference. You have various pieces of information to gather from attendees, such as their name, contact info, and session choices, and you need to keep it all organized. Using tables within forms can help structure this data neatly, making it both visually appealing and easy to navigate.
Example of a Form in a Table
<form action="/submit-registration" method="post">
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name"></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Register"></td>
</tr>
</table>
</form>
Introduction to Page Layout
Page layout in HTML is about arranging content visually on a web page to improve user experience and interaction. It’s like planning the layout of a new office—you need to decide where to put the desks, the meeting areas, and the facilities to make the space functional and appealing.
Basic Layout Elements
<div>: The go-to HTML tag for dividing your page into sections. It’s like using partitions in an office to create different working areas.
<div id="header">Header</div>
<div id="navigation">Navigation Bar</div>
<div id="main-content">Content</div>
<div id="footer">Footer</div>
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 10px;
}
.container {
display: flex;
justify-content: space-between;
}
Combining Elements for Layouts
By combining these layout techniques, you can create versatile and responsive designs that adapt to different devices and screen sizes, enhancing accessibility and user experience.
Task for You
Create a web page layout for a local business that includes a header, navigation bar, main content area, and footer using <div> tags. Inside the main content area, include a form set within a table to apply for a job, collecting details like name, email, experience, and preferred department.