Assignments On Class
8Introduction to Tables
Assignments 1. Create a Simple Table
Objective: Build
a basic table with headers and rows.
Instructions:
1. Create an
HTML file named simple_table.html.
2. Build a
table with the following columns: "Name", "Age", and
"City".
3. Add at
least three rows of sample data to the table.
4. Ensure
the table has borders for clarity.
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Simple Table</title> </head> <body>
<table border="1">
<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>
<tr>
<td>Emily Johnson</td>
<td>22</td>
<td>Chicago</td>
</tr>
</table> </body> </html> |
2. Table with Column and Row Spanning
Objective: Create
a table that uses colspan and rowspan attributes.
Instructions:
1. Create an
HTML file named spanning_table.html.
2. Create a
table with the following structure:
o
A header row with "Product",
"Price", and "Stock".
o
Two rows of data.
o
In the first data row, create a cell that spans two
columns under "Product".
o
In the second data row, create a cell that spans
two rows under "Price".
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Spanning Table</title> </head> <body>
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td colspan="2">Product A</td>
<td>In Stock</td>
</tr>
<tr>
<td rowspan="2">$20</td>
<td>Product B</td>
<td>Out of Stock</td>
</tr>
<tr>
<td>Product C</td>
<td>In Stock</td>
</tr>
</table> </body> </html> |
3. Styled Table
Objective: Style
a table using CSS for better visual presentation.
Instructions:
1. Create an
HTML file named styled_table.html.
2. Build a
table with headers and at least two rows of data.
3. Use CSS
to style the table:
o
Add padding to the cells.
o
Change the background color of the header row.
o
Add alternating row colors for better readability.
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Styled Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: center;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style> </head> <body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Product X</td>
<td>$15</td>
<td>100</td>
</tr>
<tr>
<td>Product Y</td>
<td>$30</td>
<td>50</td>
</tr>
</table> </body> </html> |
4. Interactive Table with Links
Objective: Create
a table with clickable links.
Instructions:
1. Create an
HTML file named link_table.html.
2. Build a
table with three columns: "Item", "Price", and
"Link".
3. In the
"Link" column, include a hyperlink for each item that directs to a
relevant page (e.g., a product page or a description).
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Link Table</title> </head> <body>
<table border="1">
<tr>
<th>Item</th>
<th>Price</th>
<th>Link</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
<td><a href="https://example.com/item1">More
Info</a></td>
</tr>
<tr>
<td>Item 2</td>
<td>$20</td>
<td><a href="https://example.com/item2">More
Info</a></td>
</tr>
</table> </body> </html> |
5. Table with Data and Header Row Styling
Objective: Create
a table and style the header row differently from the data rows.
Instructions:
1. Create an
HTML file named header_styled_table.html.
2. Build a
table with at least three columns and three rows of data.
3. Use CSS
to:
o
Apply a bold font and background color to header
cells.
o
Add borders to all cells.
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Header Styled Table</title>
<style>
table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
</style> </head> <body>
<table>
<tr>
<th>Category</th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Electronics</td>
<td>Headphones</td>
<td>$50</td>
</tr>
<tr>
<td>Books</td>
<td>HTML Guide</td>
<td>$15</td>
</tr>
</table> </body> </html>
|
6. Table with Multiple Header Rows
Objective: Create
a table with more than one header row.
Instructions:
1. Create an
HTML file named multi_header_table.html.
2. Build a
table that has two header rows. The first header row should contain broad
categories, while the second header row should have specific subcategories.
3. Include
at least two rows of data under each subcategory.
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Multi Header Table</title> </head> <body>
<table border="1">
<tr>
<th rowspan="2">Product</th>
<th colspan="2">Details</th>
</tr>
<tr>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Product A</td>
<td>$20</td>
<td>In Stock</td>
</tr>
<tr>
<td>Product B</td>
<td>$30</td>
<td>Out of Stock</td>
</tr>
</table> </body> </html> |
7. Responsive Table Design
Objective: Make
a table responsive for different screen sizes using CSS.
Instructions:
1. Create an
HTML file named responsive_table.html.
2. Build a
table with at least three columns and three rows of data.
3. Use CSS
media queries to ensure the table is responsive. On smaller screens, the table
should scroll horizontally if needed.
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Responsive Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
@media screen and (max-width: 600px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
</style> </head> <body>
<table>
<tr>
<th>Item</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
<td>Description of Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>$20</td>
<td>Description of Item 2</td>
</tr>
</table> </body> </html>
|
8. Table with Nested Tables
Objective: Create
a table that contains another table within a cell.
Instructions:
1. Create an
HTML file named nested_table.html.
2. Build a
main table with at least two columns.
3. In one of
the cells, embed another table with its own rows and columns.
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Nested Table</title> </head> <body>
<table border="1">
<tr>
<th>Main Item</th>
<th>Details</th>
</tr>
<tr>
<td>Item 1</td>
<td>
<table border="1">
<tr>
<th>Sub
Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>Sub Item A</td>
<td>10</td>
</tr>
<tr>
<td>Sub
Item B</td>
<td>20</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Item 2</td>
<td>Details of Item 2</td>
</tr>
</table> </body> </html> |
9. Table with CSS Grid Layout
Objective: Use
CSS Grid to layout a table-like structure.
Instructions:
1. Create an
HTML file named css_grid_table.html.
2. Use CSS
Grid to create a layout that mimics a table with rows and columns.
3. Include
headers and cells, styling them to look like a table.
Example:
|
<!DOCTYPE
html> <html> <head>
<title>CSS Grid Table</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
border: 1px solid #ddd;
}
.grid-item {
border: 1px solid #ddd;
padding: 8px;
}
.header {
background-color: #f2f2f2;
font-weight: bold;
}
</style> </head> <body>
<div class="grid-container">
<div class="grid-item header">Header 1</div>
<div class="grid-item header">Header 2</div>
<div class="grid-item header">Header 3</div>
<div class="grid-item">Data 1</div>
<div class="grid-item">Data 2</div>
<div class="grid-item">Data 3</div>
<div class="grid-item">Data 4</div>
<div class="grid-item">Data 5</div>
<div class="grid-item">Data 6</div>
</div> </body> </html> |
10. Table with Conditional Formatting
Objective: Apply
conditional formatting to highlight specific rows or cells.
Instructions:
1. Create an
HTML file named conditional_formatting_table.html.
2. Build a
table with at least three columns and multiple rows of data.
3. Use
JavaScript to conditionally format rows or cells based on their content (e.g.,
highlight cells with values above a certain number).
Example:
|
<!DOCTYPE
html> <html> <head>
<title>Conditional Formatting Table</title>
<style>
.high-value {
background-color: #ffcccc;
}
</style> </head> <body>
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Product X</td>
<td class="high-value">$150</td>
<td>Low</td>
</tr>
<tr>
<td>Product Y</td>
<td>$30</td>
<td>High</td>
</tr>
<tr>
<td>Product Z</td>
<td>$75</td>
<td>Medium</td>
</tr>
</table> </body> </html> |