Just Jolly Functions
Functions: Adding a Table with HTML, CSS, and JavaScript
This Simple Table is a basic data presentation element designed using HTML and CSS. It organizes data in a grid format, making it easy for users to compare and read structured information. The table is styled to ensure readability and clarity, featuring alternating row colors and well-defined borders.
The table has four columns:
Name: Displays the individual's name.
Age: Displays the individual's age.
City: Displays the city the individual resides in.
Country: Displays the country of residence.
Key Features:
Responsive Design: The table adjusts to different screen sizes, especially for mobile devices, ensuring it remains readable.
Hover Effect: Rows change color when hovered over, improving interactivity and user experience.
Alternating Row Colors: Even-numbered rows are shaded differently for better visual distinction, enhancing readability.
Customizable: The table's design and content can be easily customized, allowing users to add more rows, change colors, or modify the structure as needed.
Tip: Learn how to Insert HTML Code into Your Post.
HTML and CSS Code for Table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Table</title>
<style>
/* Basic styling for the table */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Simple Table</h2>
<!-- Table -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Paris</td>
</tr>
</tbody>
</table>
</body>
</html>
How It Works:
HTML Table Structure:
The table contains headers (<th>) for "Name", "Age", and "City".
The body of the table (<tbody>) contains rows (<tr>) with data cells (<td>), where the values are filled in directly.
CSS Styling:
Basic table styling is applied with borders, padding, and alternating row colors for readability.
The header row has a green background color with white text for emphasis.
Explanations:
Let's go through the code step by step and learn what each part does.
1. Document Declaration (<!DOCTYPE html>)
<!DOCTYPE html>
This is the doctype declaration. It tells the web browser that the document is an HTML5 document. It helps ensure the document is rendered correctly across different browsers.
2. Opening HTML Tag
<html lang="en">
This <html> tag represents the root element of the HTML document.
The lang="en" attribute specifies that the language of the document is English, which helps with accessibility and search engines.
3. Head Section (<head>)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Table</title>
<style>
/* CSS styles go here */
</style>
</head>
<meta charset="UTF-8">: This tag specifies that the document uses the UTF-8 character encoding, which supports a wide range of characters and symbols from many languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This is a meta tag for responsive design. It ensures the page is displayed correctly on different screen sizes, especially on mobile devices. width=device-width means the width of the viewport (the visible area of the page) should be the same as the device's width, and initial-scale=1.0 ensures the page starts at a 1x zoom level.
<title>Simple Table</title>: This sets the title of the page that appears in the browser tab. In this case, it will show "Simple Table".
<style>: The CSS (Cascading Style Sheets) is embedded within this <style> tag. The styles inside it apply to the HTML elements in the document.
4. CSS Styling Section
Inside the <style> tag, we define the look and feel of the table:
Basic Table Styling
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}
width: 100%: This makes the table take up the full width of its container.
border-collapse: collapse: This property removes the space between the borders of table cells, making the table borders appear as a single line.
margin: 20px 0: This adds a 20px margin above and below the table, creating some space around the table.
font-family: Arial, sans-serif: This sets the font to Arial or any sans-serif font, making the text easy to read.
Table Cell Padding and Borders
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
padding: 10px: This adds 10px of padding inside each table cell (both <th> and <td>), ensuring the content doesn’t touch the edges of the cell.
text-align: left: This aligns the text to the left within each cell.
border: 1px solid #ddd: This applies a light gray border to each cell (with a width of 1px).
Table Header Styling
th {
background-color: #4CAF50;
color: white;
}
background-color: #4CAF50: This gives the table header cells (<th>) a green background color (#4CAF50).
color: white: This makes the text in the header cells white, improving contrast and readability.
Alternating Row Colors (for better readability)
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(even): This selector targets even rows (<tr>) in the table. The nth-child(even) is a CSS pseudo-class that selects every even row (starting from the second one).
background-color: #f2f2f2: This applies a light gray background color to even-numbered rows for better readability and to distinguish between the rows.
5. Body Section (<body>)
<body>
<h2>Simple Table</h2>
<!-- Table -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Paris</td>
</tr>
</tbody>
</table>
</body>
Heading (<h2>)
<h2>Simple Table</h2>
This creates a heading with the text "Simple Table" above the table. The <h2> tag represents a level 2 heading, making it a bit smaller than <h1> but still important.
Table Structure
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Paris</td>
</tr>
</tbody>
</table>
<table>: This defines the table element.
<thead>: This contains the table header (<tr>) with column names like "Name", "Age", and "City".
<th>: These are the header cells in the table.
<tbody>: This contains the body of the table, which holds the actual data.
<tr>: Represents a table row.
<td>: Represents a table data cell (the individual data items for each row).
6. Closing HTML Tag
</html>
This closes the HTML document.
Final Explanation:
This code creates a simple table with three columns: Name, Age, and City. The table is styled with CSS to have borders, padding, alternating row colors, and a green header with white text. The table displays three rows of data (representing people and their ages and cities).
Table Modifications:
To customize the table in your HTML and CSS code, you can adjust various aspects of the table's structure, styling, and functionality. Here’s how you can customize the table step-by-step:
1. Customizing the Table Structure:
Adding More Rows:
To add more rows to the table, you simply need to add more <tr> tags (table rows) within the <tbody> section.
<tr>
<td>New Name</td>
<td>New Age</td>
<td>New City</td>
</tr>Adding More Columns:
To add more columns, you need to add additional <th> (for the header) and <td> (for the data cells) inside each row.
For example, to add a "Country" column:
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Country</th> <!-- New Column Header -->
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
<td>USA</td> <!-- New Column Data -->
</tr>
<!-- More rows here -->
</tbody>2. Customizing the Table Styling (CSS):
Changing Table Width:
To change the width of the table, adjust the width property in the table CSS rule:
table {
width: 80%; /* Change the width from 100% to 80% or any other value */
}Changing Border Style and Color:
You can modify the border of the table and its cells. For example, to change the border color to red:
th, td {
border: 1px solid red; /* Change border color to red */
}Adding or Modifying Cell Padding:
You can adjust the padding inside the cells to make them larger or smaller:
th, td {
padding: 20px; /* Increase padding */
}Changing Header Background Color:
You can change the background color of the header by modifying the background-color property in the th CSS rule:
th {
background-color: #3498db; /* Change the background color to blue */ color: white;
}Changing Row Hover Effect:
You can add a hover effect on the rows to make the table interactive. For example, when hovering over a row, it can change color:
tr:hover {
background-color: #ddd; /* Change row background color on hover */
}Customizing Text Alignment:
To change the text alignment in the header or cells, you can adjust the text-align property:
th, td {
text-align: center; /* Center-align text in all table cells */
}Making the Table Responsive (for Mobile):
You can add a media query to make the table more responsive on smaller screens, for instance, by ensuring the table scrolls horizontally:
@media (max-width: 600px) {
table {
width: 100%;
display: block;
overflow-x: auto;
}
}3. Changing Table Header Text:
You can change the column names in the header (<th>) to whatever you need. For example:
<th>Full Name</th>
<th>Years</th>
<th>Location</th>
4. Changing the Background Color of Rows:
You can change the color of odd or even rows by modifying the nth-child selector in CSS. For example, to change the background color of even rows:
tr:nth-child(even) {
background-color: #e0e0e0; /* Light gray color for even rows */
}
5. Adding Table Borders for Each Cell:
If you'd like to add a border around each individual cell, you can modify the border property in the td and th selectors:
th, td {
border: 1px solid black; /* Make borders thicker or change color */
}
6. Adding Alternating Row Colors:
You can adjust the row color alternation by targeting odd or even rows with the nth-child selector, like this:
tr:nth-child(odd) {
background-color: #f9f9f9; /* Light color for odd rows */
}
7. Changing Table Font:
You can change the font used in the table by altering the font-family property in the CSS:
table {
font-family: 'Courier New', Courier, monospace; /* Change to a monospaced font */
}
8. Changing Text Color:
If you'd like to change the text color inside the cells or header, you can modify the color property:
th, td {
color: #333; /* Change the text color to dark gray */
}
Example of a Fully Customized Table:
Here's an example with some of the customizations applied:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Table</title>
<style>
/* Table Styling */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: 'Arial', sans-serif;
}
th, td {
padding: 15px;
text-align: center;
border: 1px solid #333;
}
th {
background-color: #3498db;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
/* Responsive Table */
@media (max-width: 600px) {
table {
width: 100%;
display: block;
overflow-x: auto;
}
}
</style>
</head>
<body>
<h2>Customized Table</h2>
<!-- Table -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Country</th> <!-- New Column -->
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
<td>USA</td> <!-- New Column Data -->
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
<td>UK</td> <!-- New Column Data -->
</tr>
<tr>
<td>Sam Johnson</td>
<td>22</td>
<td>Paris</td>
<td>France</td> <!-- New Column Data -->
</tr>
</tbody>
</table>
</body>
</html>
Conclusion:
With the steps above, people can easily modify the table's content, design, and functionality. Customizations can include adding more data, adjusting colors, adding or removing columns, changing font styles, and making the table more responsive for mobile devices. These small tweaks allow you to tailor the table to fit the needs of your post.