MANAS BLOG



-----------------------------------------------------------------------------------
FULL CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Responsive Table</title>
    <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/128/9515/9515212.png">
</head>
    <style>
        body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #e7a000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 150px;
}

header {
    text-align: center;
    padding: 20px;
    color: #333;
    width: 100%;
    box-sizing: border-box;
}

h1 {
    font-size: 2.5em;
    margin: 0;
    padding-bottom: 10px;
}

main {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.table-wrapper {
    width: 90%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    margin: 0 auto;
}

.table-container {
    padding: 15px;
    display: flex;
    flex-direction: row;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
a {
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:link {

  color: white;
}


a:visited {
  color: white;
}

a:hover {
  color: white;
  text-decoration: underline;
}

a:active {
  color: #004085;
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  text-decoration: underline;
}
th, td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: wheat;
}

.table-caption {
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    color: #555;
}

.view-details-btn {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;

   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   
    margin-top: 100px;
}

.view-details-btn:hover {
    background-color: #0056b3;
    transform: translate(-50%, -50%) scale(1.05);
}


@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;
    }

    th, td {
        padding: 10px;
        font-size: 0.9em;
    }

    .view-details-btn {
        padding: 10px 20px;
        font-size: 1em;
        margin-top: 80px;
    }

    .table-wrapper {
        width: 95%;
        padding: 0;
    }
    .table-container {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em;
    }

    th, td {
        padding: 8px;
        font-size: 0.8em;
    }

    .view-details-btn {
        padding: 8px 18px;
        font-size: 0.9em;
        margin-top: 80px;
        padding-bottom: 20px;
    }

    .table-wrapper {
        width: 98%;
        border-radius: 5px;
    }
    .table-container {
        padding: 8px;
    }
}
    </style>
<body>
    <header>
        <h1>Table made by Manas</h1>
    </header>

    <main>
        <div class="table-wrapper">
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Name</th>
                            <th>Age</th>
                            <th>Year</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1.</td>
                            <td>John Doe</td>
                            <td>22</td>
                            <td>2023</td>
                        </tr>
                        <tr>
                            <td>2.</td>
                            <td>Jane Smith</td>
                            <td>45</td>
                            <td>2022</td>
                        </tr>
                        <tr>
                            <td>3.</td>
                            <td>Peter Jones</td>
                            <td>29</td>
                            <td>2024</td>
                        </tr>
                        <tr>
                            <td>4.</td>
                            <td>Emily Brown</td>
                            <td>36</td>
                            <td>2023</td>
                        </tr>
                    </tbody>
                </table>
                <p class="table-caption">Manas Table</p>
            </div>
        </div>
    </main>

    <button class="view-details-btn"><a href="https://www.google.com/">View Details</a></button>
</body>
</html>

-----------------------------------------------------------------------------------

How to Create a Responsive Table with HTML, CSS, and a "View Details" Button

In this blog post, made by Manas, we'll walk through creating a responsive table using HTML and CSS. We'll explore how to set up the table, make it mobile-friendly, and enhance the design with styling techniques like hover effects and a call-to-action button. This table is designed to display basic data like No., Name, Age, and Year, and is styled with modern web design principles.


HTML Structure

The foundation of the table is built using HTML. Below is the HTML code that creates a simple table and the structure around it.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Responsive Table</title>
    <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/128/9515/9515212.png">
</head>

The DOCTYPE declaration defines the document type, and we specify UTF-8 encoding for compatibility with various characters. We also set the viewport to ensure the table looks great on different screen sizes, especially mobile.

The head section contains:


  • The title for the page.

  • A favicon link (icon for the browser tab).

-----------------------------------------------------------------------------------------------------------------------------

Styling with CSS

The majority of the styling is done within the <style> tags, and we focus on making the table visually appealing and responsive.

Here’s a breakdown of the key sections of the CSS:

Body Styling

We start by setting a background color and using flexbox to center the content vertically and horizontally.

css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #e7a000; /* Yellow/orange background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 150px;
}

  • Background Color: A warm yellow/orange to create a vibrant, welcoming tone.

  • Flexbox Layout: The entire page uses flexbox for easy vertical centering.

  • Full Viewport Height: Ensures the body takes the entire height of the screen.

Table Wrapper Styling

This section makes sure the table is centered within a container that has some style, like borders and shadows, for added visual appeal.


 
css

.table-wrapper {
    width: 90%;
    max-width: 600px;

    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    margin: 0 auto;
}

  • Responsive Width: The table wrapper takes up 90% of the screen width, with a maximum of 600px to prevent it from becoming too wide on larger screens.

  • Box Shadow: Subtle shadow effect to create a card-like feel.

  • Overflow-X: Allows horizontal scrolling on smaller screens if the table overflows.

Table Styling

We focus on making the table look clean with borders, padding, and alternating row colors.

css

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
th, td {
    border: 1px solid #ddd;
    padding: 12px 15px;
}

  • Table Width: The table is 100% wide within the wrapper.

  • Cell Padding: The cells have generous padding for better readability.

The hover effect on rows adds interactivity:

css

tbody tr:hover {
    background-color: wheat;
}

When a user hovers over a row, the background color changes to a light wheat shade, making the table feel more interactive.

Typography and Caption

The header and table caption are styled for clarity and to make the content more visually engaging.

css

h1 {
    font-size: 2.5em;
    margin: 0;
    padding-bottom: 10px;
}
.table-caption {
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    color: #555;
}

The h1 header for the page is large and prominent. The table caption is centered, italicized, and colored with a soft gray to provide a gentle, subtle finish.


-----------------------------------------------------------------------------------------------------------------------------

Interactive "View Details" Button

To add an extra layer of interactivity, a "View Details" button is positioned in the center of the screen. When clicked, it links to Google (or any link you choose).

css

.view-details-btn {
    background-color: #007bff;

    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 100px;
}
.view-details-btn:hover {
    background-color: #0056b3;
    transform: translate(-50%, -50%) scale(1.05);
}

  • Button Design: The button is styled with a blue background and white text. It has rounded corners and a hover effect that changes the color and slightly scales the button up for emphasis.

  • Positioning: The button is absolutely positioned at the center of the screen, making it float over the content.

-----------------------------------------------------------------------------------------------------------------------------

Mobile Responsiveness

The table and button design are made fully responsive through media queries. This ensures the table adapts to smaller screen sizes, such as tablets and mobile phones.

For Tablets and Smaller Laptops (max-width: 768px):

css

@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;
    }
    th, td {
        padding: 10px;
    }
}

For Mobile Devices (max-width: 480px):

css

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em;
    }
    th, td {
        padding: 8px;
    }
    .view-details-btn {
        padding: 8px 18px;
    }
}

  • Text Size Adjustments: Font sizes decrease slightly on smaller screens.

  • Padding Adjustments: Cell padding is reduced to make better use of screen space.


Comments

Post a Comment

Popular posts from this blog

Image
  Building a Simple Robotic Arm with Arduino, Servos, Joysticks, and 3d Printing ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- .What You’ll Need: Arduino Uno : The brain of your robotic arm, responsible for processing signals from the joysticks and controlling the servos. 4 Servos : These are the motors that will move the robotic arm's joints. You'll need servos with enough torque to handle the arm's weight. 2 Joysticks : These are used to control the arm’s movement along different axes. Breadboard : Used for making temporary connections between components, ideal for prototyping. Male-to-Male Jumper Wires : To connect the Arduino, breadboard, and servos. 3D Printed Components : Custom-designed parts for the arm, such as brackets, joints, and links. Power Supply : To ensure the servos receive enough power to fu...
Read more