skip to Main Content

it’s a project for my school and I’m stuck. I don’t know how to solve it. I apologize for the poor image quality; you can write anything to replace what it says. I would appreciate the help.

I hope to receive some help. I have only made simple HTML tables, but I can’t do this one. I’ve been trying all day, but I just can’t make progress, and I need to submit this HTML table soon.

enter image description here

3

Answers


  1. This may solve your problem.

    <html>
    
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    
    <body>
        <div class="container mb-10 ">
            <br>
        <table  class="table table-bordered mt-10">
            <thead>
                <tr>
                    <td rowspan="3">Title 1</td>
                    <td colspan="3">Title 2</td>              
                </tr>
                <tr>
                    <td colspan="2">Title 3</td>               
                    <td rowspan="2">Total</td>
                </tr>
                <tr>
                    <td>Sub Title 1</td>
                    <td>Sub Title 2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
                </tr>
                <tr>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
                </tr>
                <tr>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
                    <td>ASDF</td>
                </tr>
            </tbody>
        </table></div>
    </body>
    
    </html>
    

    enter image description here

    Login or Signup to reply.
  2. Here is a example of using table in html

    <!DOCTYPE html>
    <html>
    <head>
      <title>HTML Table Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <table>
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
          </tr>
          <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
          </tr>
          <tr>
            <td>Row 3, Cell 1</td>
            <td>Row 3, Cell 2</td>
            <td>Row 3, Cell 3</td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>
    
    Login or Signup to reply.
  3. Try this code adjust the text and colors according to your needs

    /* CSs */
    table{
      border:1px solid black;
      border-collapse: collapse;
    }
    th{
      background-color:gray;
    }
    td,th{
      border:1px solid black;
      border-collapse:collapse;
      padding:10px 20px;
    }
    .bg-gray{
     background-color:gray;
    }
    <table >
      <tr>
        <th align=center rowspan="3">
          Heading
        </th>
        <th colspan="3">
          Poblacon
        </th>
        <tr>
          <td colspan="2" align="center" class="bg-gray">
            send
          </td>
          <td rowspan="2" class="bg-gray">
            Total
          </td>
      </tr>
      <tr>
        <td class="bg-gray">
          heading1
        </td>
        <td class="bg-gray">
          heading2
        </td>
      </tr>
      </tr>
    <tr>
      <td>abc</td>
      <td>22</td>
      <td>22</td>
      <td>33</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>22</td>
      <td>22</td>
      <td>33</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>22</td>
      <td>22</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>22</td>
      <td>22</td>
      <td>33</td>
    </tr>
    
      
      
    </table>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search