MACRO NEPAL
Complete Guide to HTML and CSS Lists & Tables
awiskar acharya
March 12, 2026
10:49 am

Introduction

Lists and tables are fundamental HTML elements for organizing and displaying data. Lists are perfect for grouping related items, while tables excel at presenting structured data in rows and columns. When combined with CSS, these elements become powerful tools for creating well-structured, visually appealing web content.

Part 1: HTML Lists

HTML provides three main types of lists: ordered lists (<ol>), unordered lists (<ul>), and description lists (<dl>). Each serves a different purpose and can be styled extensively with CSS.

1.1 Unordered Lists

Unordered lists are used for grouping items where the order doesn't matter. They are typically displayed with bullet points.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered Lists Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
.shopping-list {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
max-width: 400px;
}
.shopping-list h2 {
margin-top: 0;
color: #333;
}
.shopping-list ul {
padding-left: 20px;
}
.shopping-list li {
margin-bottom: 8px;
color: #555;
}
</style>
</head>
<body>
<div class="shopping-list">
<h2>Shopping List</h2>
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
<li>Dairy
<ul>
<li>Milk</li>
<li>Cheese</li>
<li>Yogurt</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

1.2 Ordered Lists

Ordered lists are used when the sequence of items matters, such as step-by-step instructions.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered Lists Example</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.recipe-card {
background-color: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-width: 500px;
margin: 0 auto;
}
.recipe-card h2 {
color: #2c3e50;
border-bottom: 2px solid #e74c3c;
padding-bottom: 10px;
}
.recipe-card ol {
padding-left: 25px;
}
.recipe-card li {
margin-bottom: 12px;
color: #34495e;
}
.recipe-card li::marker {
color: #e74c3c;
font-weight: bold;
}
</style>
</head>
<body>
<div class="recipe-card">
<h2>How to Make Pancakes</h2>
<ol>
<li>In a large bowl, mix flour, sugar, baking powder, and salt.</li>
<li>In another bowl, whisk milk, eggs, and melted butter.</li>
<li>Pour wet ingredients into dry ingredients and stir until just combined.</li>
<li>Heat a lightly oiled griddle over medium-high heat.</li>
<li>Pour batter onto griddle, about 1/4 cup per pancake.</li>
<li>Cook until bubbles form on surface, then flip and cook until golden brown.</li>
<li>Serve warm with maple syrup and fresh berries.</li>
</ol>
</div>
</body>
</html>

1.3 Description Lists

Description lists are used for terms and their descriptions, perfect for glossaries, metadata, or key-value pairs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Description Lists Example</title>
<style>
body {
font-family: 'Georgia', serif;
margin: 20px;
background-color: #fafafa;
}
.glossary {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
max-width: 600px;
margin: 0 auto;
}
.glossary h2 {
color: #8e44ad;
text-align: center;
margin-bottom: 30px;
}
.glossary dl {
margin: 0;
}
.glossary dt {
font-weight: bold;
color: #2c3e50;
margin-top: 20px;
font-size: 1.1em;
}
.glossary dt:first-of-type {
margin-top: 0;
}
.glossary dd {
margin-left: 20px;
color: #7f8c8d;
padding: 8px 0;
border-bottom: 1px solid #ecf0f1;
}
.glossary dd:last-of-type {
border-bottom: none;
}
</style>
</head>
<body>
<div class="glossary">
<h2>Web Development Glossary</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - the standard markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - a style sheet language used for describing the presentation of a document.</dd>
<dt>JavaScript</dt>
<dd>A programming language that enables interactive web pages and is an essential part of web applications.</dd>
<dt>Responsive Design</dt>
<dd>An approach to web design that makes web pages render well on a variety of devices and window sizes.</dd>
<dt>API</dt>
<dd>Application Programming Interface - a set of protocols for building and integrating application software.</dd>
</dl>
</div>
</body>
</html>

1.4 Advanced List Styling with CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced List Styling</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 30px;
background-color: rgba(255,255,255,0.95);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* Custom bullet points */
.custom-bullets {
list-style-type: none;
padding: 0;
}
.custom-bullets li {
padding: 10px 0 10px 30px;
position: relative;
border-bottom: 1px solid #e0e0e0;
}
.custom-bullets li::before {
content: "✓";
color: #27ae60;
font-weight: bold;
position: absolute;
left: 0;
}
/* Numbered list with custom styling */
.styled-numbers {
list-style: none;
counter-reset: step-counter;
padding: 0;
}
.styled-numbers li {
counter-increment: step-counter;
margin-bottom: 15px;
padding: 10px 15px 10px 50px;
position: relative;
background-color: #f8f9fa;
border-radius: 5px;
}
.styled-numbers li::before {
content: counter(step-counter);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
background-color: #3498db;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
/* Horizontal navigation menu */
.nav-menu {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #333;
border-radius: 5px;
overflow: hidden;
}
.nav-menu li {
float: left;
}
.nav-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
transition: background-color 0.3s;
}
.nav-menu li a:hover {
background-color: #555;
}
.nav-menu li a.active {
background-color: #4CAF50;
}
/* List with icons */
.icon-list {
list-style-type: none;
padding: 0;
}
.icon-list li {
padding: 10px 0 10px 40px;
margin-bottom: 10px;
background: #f9f9f9;
border-radius: 5px;
transition: transform 0.2s;
}
.icon-list li:hover {
transform: translateX(5px);
background-color: #e9e9e9;
}
.icon-list li::before {
content: "⭐";
margin-right: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="container">
<h2>Advanced List Styling Examples</h2>
<h3>Custom Bullet Points</h3>
<ul class="custom-bullets">
<li>Complete project documentation</li>
<li>Review code changes</li>
<li>Run tests and fix bugs</li>
<li>Deploy to staging environment</li>
</ul>
<h3>Styled Numbered List</h3>
<ol class="styled-numbers">
<li>Plan your website structure</li>
<li>Design wireframes and mockups</li>
<li>Write HTML structure</li>
<li>Apply CSS styling</li>
<li>Add JavaScript functionality</li>
</ol>
<h3>Horizontal Navigation Menu</h3>
<ul class="nav-menu">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="clearfix"></div>
<h3>Icon-based List</h3>
<ul class="icon-list">
<li>5-star rated product</li>
<li>Free shipping available</li>
<li>24/7 customer support</li>
<li>30-day money-back guarantee</li>
</ul>
</div>
</body>
</html>

Part 2: HTML Tables

Tables are designed for displaying tabular data in rows and columns. They consist of table rows (<tr>), table headers (<th>), and table data cells (<td>).

2.1 Basic Table Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Table Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.basic-table {
width: 100%;
border-collapse: collapse;
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.basic-table th {
background-color: #4CAF50;
color: white;
padding: 12px;
text-align: left;
}
.basic-table td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.basic-table tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h2>Employee Directory</h2>
<table class="basic-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>John Smith</td>
<td>Engineering</td>
<td>Senior Developer</td>
<td>$85,000</td>
</tr>
<tr>
<td>1002</td>
<td>Jane Doe</td>
<td>Marketing</td>
<td>Marketing Manager</td>
<td>$75,000</td>
</tr>
<tr>
<td>1003</td>
<td>Bob Johnson</td>
<td>Sales</td>
<td>Sales Representative</td>
<td>$65,000</td>
</tr>
<tr>
<td>1004</td>
<td>Alice Williams</td>
<td>HR</td>
<td>HR Director</td>
<td>$90,000</td>
</tr>
</tbody>
</table>
</body>
</html>

2.2 Table with Merged Cells (colspan and rowspan)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Merged Cells</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.schedule-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.schedule-table th,
.schedule-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.schedule-table th {
background-color: #2196F3;
color: white;
font-weight: bold;
}
.schedule-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.schedule-table td[colspan] {
background-color: #e3f2fd;
font-weight: bold;
}
.schedule-table td[rowspan] {
background-color: #fff3e0;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Weekly Class Schedule</h2>
<table class="schedule-table">
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 - 10:00</td>
<td>Math</td>
<td>Physics</td>
<td>Math</td>
<td>Physics</td>
<td rowspan="2">Lab Session</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>English</td>
<td>Chemistry</td>
<td>English</td>
<td>Chemistry</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td colspan="5" style="background-color: #ffcdd2;">Lunch Break</td>
</tr>
<tr>
<td>12:00 - 13:00</td>
<td>History</td>
<td>Geography</td>
<td>History</td>
<td>Geography</td>
<td rowspan="2">Project Work</td>
</tr>
<tr>
<td>13:00 - 14:00</td>
<td>Art</td>
<td>Music</td>
<td>Art</td>
<td>Music</td>
</tr>
</tbody>
</table>
</body>
</html>

2.3 Table with Caption and Scoping

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Table with Caption</title>
<style>
body {
font-family: 'Helvetica', sans-serif;
margin: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.table-container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.product-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.product-table caption {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 15px;
color: #333;
caption-side: top;
}
.product-table th,
.product-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.product-table th {
background-color: #4a90e2;
color: white;
font-weight: bold;
}
.product-table th[scope="row"] {
background-color: #f5f5f5;
color: #333;
}
.product-table tr:hover {
background-color: #f5f5f5;
}
.price {
text-align: right;
font-weight: bold;
color: #27ae60;
}
.total-row {
font-weight: bold;
background-color: #e8f5e9;
}
.total-row td {
border-top: 2px solid #4a90e2;
}
</style>
</head>
<body>
<div class="table-container">
<h2>Product Inventory</h2>
<table class="product-table">
<caption>Current Stock Levels and Pricing</caption>
<thead>
<tr>
<th scope="col">Product ID</th>
<th scope="col">Product Name</th>
<th scope="col">Category</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Total Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">P001</th>
<td>Laptop</td>
<td>Electronics</td>
<td class="price">25</td>
<td class="price">$899.99</td>
<td class="price">$22,499.75</td>
</tr>
<tr>
<th scope="row">P002</th>
<td>Mouse</td>
<td>Accessories</td>
<td class="price">100</td>
<td class="price">$29.99</td>
<td class="price">$2,999.00</td>
</tr>
<tr>
<th scope="row">P003</th>
<td>Keyboard</td>
<td>Accessories</td>
<td class="price">50</td>
<td class="price">$79.99</td>
<td class="price">$3,999.50</td>
</tr>
<tr>
<th scope="row">P004</th>
<td>Monitor</td>
<td>Electronics</td>
<td class="price">15</td>
<td class="price">$299.99</td>
<td class="price">$4,499.85</td>
</tr>
<tr class="total-row">
<td colspan="5" style="text-align: right;"><strong>Total Inventory Value:</strong></td>
<td class="price"><strong>$33,998.10</strong></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

2.4 Responsive Tables

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tables</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
background-color: #f0f2f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h2 {
color: #333;
margin-bottom: 20px;
}
/* Method 1: Horizontal scroll on small screens */
.table-wrapper {
overflow-x: auto;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.responsive-table {
width: 100%;
border-collapse: collapse;
background-color: white;
min-width: 600px;
}
.responsive-table th,
.responsive-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.responsive-table th {
background-color: #2196F3;
color: white;
position: sticky;
top: 0;
}
.responsive-table tr:nth-child(even) {
background-color: #f8f9fa;
}
.responsive-table tr:hover {
background-color: #e9ecef;
}
/* Method 2: Card layout on mobile */
.card-table {
width: 100%;
border-collapse: collapse;
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.card-table th {
background-color: #4CAF50;
color: white;
padding: 12px;
text-align: left;
}
.card-table td {
padding: 12px;
border-bottom: 1px solid #ddd;
}
/* Responsive breakpoints */
@media screen and (max-width: 768px) {
.card-table thead {
display: none;
}
.card-table,
.card-table tbody,
.card-table tr,
.card-table td {
display: block;
width: 100%;
}
.card-table tr {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.card-table td {
text-align: right;
padding-left: 50%;
position: relative;
border-bottom: 1px solid #eee;
}
.card-table td::before {
content: attr(data-label);
position: absolute;
left: 12px;
width: 45%;
padding-right: 10px;
text-align: left;
font-weight: bold;
color: #4CAF50;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Method 1: Horizontal Scroll</h2>
<div class="table-wrapper">
<table class="responsive-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Department</th>
<th>Position</th>
<th>Salary</th>
<th>Join Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>John Smith</td>
<td>[email protected]</td>
<td>Engineering</td>
<td>Senior Developer</td>
<td>$85,000</td>
<td>2020-03-15</td>
<td>Active</td>
</tr>
<tr>
<td>1002</td>
<td>Jane Doe</td>
<td>[email protected]</td>
<td>Marketing</td>
<td>Marketing Manager</td>
<td>$75,000</td>
<td>2019-06-20</td>
<td>Active</td>
</tr>
<tr>
<td>1003</td>
<td>Bob Johnson</td>
<td>[email protected]</td>
<td>Sales</td>
<td>Sales Rep</td>
<td>$65,000</td>
<td>2021-01-10</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
<h2>Method 2: Card Layout on Mobile</h2>
<table class="card-table">
<thead>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
<th>Stock</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Product">Wireless Headphones</td>
<td data-label="Category">Audio</td>
<td data-label="Price">$99.99</td>
<td data-label="Stock">45</td>
<td data-label="Rating">4.5</td>
</tr>
<tr>
<td data-label="Product">Smart Watch</td>
<td data-label="Category">Wearables</td>
<td data-label="Price">$249.99</td>
<td data-label="Stock">23</td>
<td data-label="Rating">4.2</td>
</tr>
<tr>
<td data-label="Product">Bluetooth Speaker</td>
<td data-label="Category">Audio</td>
<td data-label="Price">$79.99</td>
<td data-label="Stock">67</td>
<td data-label="Rating">4.7</td>
</tr>
<tr>
<td data-label="Product">Tablet</td>
<td data-label="Category">Electronics</td>
<td data-label="Price">$399.99</td>
<td data-label="Stock">12</td>
<td data-label="Rating">4.4</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

2.5 Styled Table with Zebra Stripes and Hover Effects

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Table with Effects</title>
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 20px;
background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
min-height: 100vh;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 30px;
background-color: rgba(255,255,255,0.9);
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.styled-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.styled-table thead tr {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.styled-table th {
padding: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
}
.styled-table td {
padding: 12px 15px;
border-bottom: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.styled-table tbody tr {
background-color: white;
transition: all 0.3s ease;
}
/* Zebra stripes */
.styled-table tbody tr:nth-child(even) {
background-color: #f8f9fa;
}
/* Hover effect */
.styled-table tbody tr:hover {
background: linear-gradient(135deg, #667eea 20%, #764ba2 100%);
color: white;
transform: scale(1.01);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.styled-table tbody tr:hover td {
color: white;
border-bottom-color: rgba(255,255,255,0.3);
}
/* Status badges */
.status-badge {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.status-active {
background-color: #c8e6c9;
color: #2e7d32;
}
.status-pending {
background-color: #fff3e0;
color: #ef6c00;
}
.status-inactive {
background-color: #ffcdd2;
color: #c62828;
}
/* Price styling */
.price {
font-weight: bold;
color: #2e7d32;
}
.styled-table tbody tr:hover .price {
color: #ffd700;
}
/* First column styling */
.styled-table td:first-child,
.styled-table th:first-child {
padding-left: 20px;
}
.styled-table td:last-child,
.styled-table th:last-child {
padding-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Customer Orders Dashboard</h2>
<table class="styled-table">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Product</th>
<th>Quantity</th>
<th>Total</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD-001</td>
<td>John Doe</td>
<td>MacBook Pro</td>
<td>1</td>
<td class="price">$1,299.99</td>
<td><span class="status-badge status-active">Delivered</span></td>
</tr>
<tr>
<td>#ORD-002</td>
<td>Jane Smith</td>
<td>iPhone 13</td>
<td>2</td>
<td class="price">$1,599.98</td>
<td><span class="status-badge status-pending">Processing</span></td>
</tr>
<tr>
<td>#ORD-003</td>
<td>Bob Wilson</td>
<td>iPad Air</td>
<td>1</td>
<td class="price">$599.99</td>
<td><span class="status-badge status-active">Shipped</span></td>
</tr>
<tr>
<td>#ORD-004</td>
<td>Alice Brown</td>
<td>Apple Watch</td>
<td>1</td>
<td class="price">$399.99</td>
<td><span class="status-badge status-pending">Pending</span></td>
</tr>
<tr>
<td>#ORD-005</td>
<td>Charlie Davis</td>
<td>AirPods Pro</td>
<td>3</td>
<td class="price">$749.97</td>
<td><span class="status-badge status-inactive">Cancelled</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Part 3: Combined Examples

3.1 Restaurant Menu (Lists + Tables)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Menu</title>
<style>
body {
font-family: 'Playfair Display', serif;
margin: 0;
background: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4') no-repeat center center fixed;
background-size: cover;
}
.menu-container {
max-width: 800px;
margin: 50px auto;
background-color: rgba(255,255,255,0.95);
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.menu-title {
text-align: center;
color: #2c3e50;
font-size: 2.5em;
margin-bottom: 30px;
border-bottom: 3px solid #e67e22;
padding-bottom: 15px;
}
.menu-section {
margin-bottom: 40px;
}
.section-title {
color: #e67e22;
font-size: 1.8em;
margin-bottom: 20px;
padding-left: 15px;
border-left: 5px solid #e67e22;
}
/* Menu items as list */
.menu-list {
list-style-type: none;
padding: 0;
}
.menu-list li {
padding: 12px 20px;
margin-bottom: 10px;
background-color: #f9f9f9;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
transition: transform 0.3s;
}
.menu-list li:hover {
transform: translateX(10px);
background-color: #f0f0f0;
}
.item-name {
font-weight: bold;
color: #2c3e50;
}
.item-price {
color: #27ae60;
font-weight: bold;
font-size: 1.2em;
}
.item-desc {
font-size: 0.9em;
color: #7f8c8d;
margin-top: 5px;
}
/* Daily specials as table */
.specials-table {
width: 100%;
border-collapse: collapse;
background-color: #f9f9f9;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.specials-table th {
background-color: #e67e22;
color: white;
padding: 15px;
font-size: 1.1em;
}
.specials-table td {
padding: 12px;
border-bottom: 1px solid #ddd;
}
.specials-table tr:last-child td {
border-bottom: none;
}
.specials-table tr:hover {
background-color: #f0f0f0;
}
.day {
font-weight: bold;
color: #e67e22;
}
.price-tag {
background-color: #27ae60;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
text-align: center;
}
/* Dietary icons */
.dietary {
list-style-type: none;
padding: 0;
display: flex;
gap: 10px;
margin: 5px 0;
}
.dietary li {
background-color: #ecf0f1;
padding: 3px 8px;
border-radius: 3px;
font-size: 0.8em;
color: #7f8c8d;
}
.dietary li.veg {
background-color: #c8e6c9;
color: #2e7d32;
}
.dietary li.spicy {
background-color: #ffcdd2;
color: #c62828;
}
</style>
</head>
<body>
<div class="menu-container">
<h1 class="menu-title">La Belle Table</h1>
<!-- Menu Section as List -->
<div class="menu-section">
<h2 class="section-title">Appetizers</h2>
<ul class="menu-list">
<li>
<div>
<span class="item-name">Bruschetta</span>
<div class="item-desc">Toasted bread with tomatoes, garlic, and basil</div>
<ul class="dietary">
<li class="veg">Vegetarian</li>
</ul>
</div>
<span class="item-price">$9.99</span>
</li>
<li>
<div>
<span class="item-name">Calamari Fritti</span>
<div class="item-desc">Fried squid with marinara sauce</div>
<ul class="dietary">
<li class="spicy">Spicy</li>
</ul>
</div>
<span class="item-price">$12.99</span>
</li>
<li>
<div>
<span class="item-name">Stuffed Mushrooms</span>
<div class="item-desc">Mushrooms filled with cheese and herbs</div>
<ul class="dietary">
<li class="veg">Vegetarian</li>
</ul>
</div>
<span class="item-price">$10.99</span>
</li>
</ul>
</div>
<!-- Daily Specials as Table -->
<div class="menu-section">
<h2 class="section-title">Daily Specials</h2>
<table class="specials-table">
<thead>
<tr>
<th>Day</th>
<th>Special</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="day">Monday</td>
<td>Lobster Risotto</td>
<td>Creamy risotto with fresh lobster tail</td>
<td class="price-tag">$28.99</td>
</tr>
<tr>
<td class="day">Tuesday</td>
<td>Filet Mignon</td>
<td>8oz filet with red wine reduction</td>
<td class="price-tag">$34.99</td>
</tr>
<tr>
<td class="day">Wednesday</td>
<td>Seafood Paella</td>
<td>Spanish rice with mixed seafood</td>
<td class="price-tag">$26.99</td>
</tr>
<tr>
<td class="day">Thursday</td>
<td>Vegetable Lasagna</td>
<td>Layered pasta with seasonal vegetables</td>
<td class="price-tag">$18.99</td>
</tr>
<tr>
<td class="day">Friday</td>
<td>Grilled Salmon</td>
<td>Fresh salmon with lemon butter sauce</td>
<td class="price-tag">$24.99</td>
</tr>
</tbody>
</table>
</div>
<!-- Main Courses as Nested List -->
<div class="menu-section">
<h2 class="section-title">Main Courses</h2>
<ul class="menu-list">
<li>
<div>
<span class="item-name">Grilled Salmon</span>
<div class="item-desc">Fresh Atlantic salmon with seasonal vegetables</div>
<ul class="dietary">
<li>Gluten-Free</li>
</ul>
</div>
<span class="item-price">$24.99</span>
</li>
<li>
<div>
<span class="item-name">Ribeye Steak</span>
<div class="item-desc">12oz prime ribeye with mashed potatoes</div>
<ul class="dietary">
<li class="spicy">Spicy</li>
</ul>
</div>
<span class="item-price">$32.99</span>
</li>
<li>
<div>
<span class="item-name">Mushroom Risotto</span>
<div class="item-desc">Arborio rice with wild mushrooms</div>
<ul class="dietary">
<li class="veg">Vegetarian</li>
</ul>
</div>
<span class="item-price">$19.99</span>
</li>
</ul>
</div>
<!-- Desserts as Description List -->
<div class="menu-section">
<h2 class="section-title">Desserts</h2>
<dl style="background-color: #f9f9f9; padding: 20px; border-radius: 8px;">
<dt style="font-weight: bold; color: #e67e22; margin-top: 15px; font-size: 1.2em;">Tiramisu</dt>
<dd style="margin-left: 20px; color: #7f8c8d; padding: 8px 0;">Classic Italian dessert with coffee and mascarpone - $8.99</dd>
<dt style="font-weight: bold; color: #e67e22; margin-top: 15px; font-size: 1.2em;">Crème Brûlée</dt>
<dd style="margin-left: 20px; color: #7f8c8d; padding: 8px 0;">Vanilla custard with caramelized sugar crust - $7.99</dd>
<dt style="font-weight: bold; color: #e67e22; margin-top: 15px; font-size: 1.2em;">Chocolate Lava Cake</dt>
<dd style="margin-left: 20px; color: #7f8c8d; padding: 8px 0;">Warm chocolate cake with molten center - $8.99</dd>
</dl>
</div>
</div>
</body>
</html>

Best Practices Summary

Lists Best Practices

  1. Use semantic HTML: Choose the right list type (<ul>, <ol>, <dl>) for your content
  2. Nested lists: Use them for hierarchical content
  3. Accessibility: Always use proper list markup for screen readers
  4. CSS styling: Use list-style-type for bullets, list-style-position for alignment
  5. Responsive design: Consider mobile layouts when styling lists

Tables Best Practices

  1. Use <thead>, <tbody>, <tfoot>: Properly structure your tables
  2. Add <caption>: Provide context for screen readers
  3. Use scope attribute: Helps screen readers understand headers
  4. Make tables responsive: Use overflow-x or transform to card layout on mobile
  5. Avoid tables for layout: Use CSS Grid or Flexbox instead
  6. Use colspan and rowspan: For merging cells when needed
  7. Zebra striping: Improves readability with :nth-child()
  8. Hover effects: Enhance user interaction

Accessibility Considerations

  • Always use proper semantic HTML
  • Include captions and summaries for complex tables
  • Test with screen readers
  • Ensure sufficient color contrast
  • Provide keyboard navigation support

This comprehensive guide covers everything from basic list and table structures to advanced styling techniques, responsive designs, and real-world examples. Practice with these examples and experiment with your own designs to master HTML and CSS lists and tables.

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

Category : HTML AND CSS

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper