locked
How to create an html table with the given format RRS feed

  • Question

  • User-1355965324 posted

    How to create an html table  grid  with the given format. It should be grid format with the text center aligned on the column . Please help  

    Employee Monday Tuesday Wed Thu Net Hrs
    In Out In Out In Out In Out
    xxxx 7 17 7 17 7 17 7 17 20.00
    Thursday, January 17, 2019 7:07 AM

Answers

  • User839733648 posted

    Hi polachan,

    According to your description, I've made a sample on my side.

    Hope this will be helpful to you.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                width: 50%;
            }
    
            table, th, td {
                border: 1px solid black;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Employee</th>
                    <th colspan="2">Monday</th>
                    <th colspan="2"> Tuesday</th>
                    <th colspan="2">Wed</th>
                    <th colspan="2">Thu</th>
                    <th>Net Hrs</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> </td>
                    <td>In</td>
                    <td>Out</td>
                    <td>In</td>
                    <td>Out</td>
                    <td>In</td>
                    <td>Out</td>
                    <td>In</td>
                    <td>Out</td>
                    <td> </td>
                </tr>
                <tr>
                    <td>xxxx</td>
                    <td>7</td>
                    <td>17</td>
                    <td>7</td>
                    <td>17</td>
                    <td>7</td>
                    <td>17</td>
                    <td>7</td>
                    <td>17</td>
                    <td>20.00</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 18, 2019 8:06 AM

All replies

  • User-943250815 posted

    If you are looking for how to do it with Gridview Control, check this https://www.aspsnippets.com/Articles/Merge-Merging-GridView-Header-Columns-Cells-by-adding-Multiple-Headers-Header-Row-in-ASPNET.aspx

    Thursday, January 17, 2019 10:03 PM
  • User839733648 posted

    Hi polachan,

    According to your description, I've made a sample on my side.

    Hope this will be helpful to you.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                width: 50%;
            }
    
            table, th, td {
                border: 1px solid black;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Employee</th>
                    <th colspan="2">Monday</th>
                    <th colspan="2"> Tuesday</th>
                    <th colspan="2">Wed</th>
                    <th colspan="2">Thu</th>
                    <th>Net Hrs</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> </td>
                    <td>In</td>
                    <td>Out</td>
                    <td>In</td>
                    <td>Out</td>
                    <td>In</td>
                    <td>Out</td>
                    <td>In</td>
                    <td>Out</td>
                    <td> </td>
                </tr>
                <tr>
                    <td>xxxx</td>
                    <td>7</td>
                    <td>17</td>
                    <td>7</td>
                    <td>17</td>
                    <td>7</td>
                    <td>17</td>
                    <td>7</td>
                    <td>17</td>
                    <td>20.00</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 18, 2019 8:06 AM