Question 262101 in Html Question posted in
Some basic documentation can be found here.

How to fit the height of the particular cell in the HTML table?

DESIGN
In this design, I have the confusion on the GST SUMMARY column, which doesn’t come with the row-wise and also it height is different compared to other cell. I genuinely confused and struck on this design.

I want the idea for to design this HTML Table or Sample code to learn.

Tags:

3

Answers


  1. 0 
    <!DOCTYPE html>
<html>
<head>
    <title>Sample HTML Table</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>Product A</td>
            <td>$10.00</td>
            <td>3</td>
            <td>$30.00</td>
        </tr>
        <tr>
            <td>Product B</td>
            <td>$15.00</td>
            <td>2</td>
            <td>$30.00</td>
        </tr>
        <tr>
            <td colspan="3" align="right">Subtotal:</td>
            <td>$60.00</td>
        </tr>
        <tr>
            <td colspan="3" align="right">GST (18%):</td>
            <td>$10.80</td>
        </tr>
        <tr>
            <td colspan="3" align="right">Total:</td>
            <td>$70.80</td>
        </tr>
    </table>
</body>
</html>

    In this example, we have a simple table that represents a list of products with their prices, quantities, and totals. The table includes rows for the product details, a subtotal, GST (Goods and Services Tax), and a total.

    You can customize this code to match your specific design requirements, including adjusting the styles, adding more rows and columns, and modifying the content as needed. CSS can be used to further style the table and make it visually appealing.

    Login or Signup to reply.
  2. 0

    Here’s an example of how to reduce the size of a specific cell in your table:

    <!DOCTYPE html>
<html>
<head>
    <title>Sample HTML Table</title>
    <style>
        /* Apply styles to the specific cell or cells you want to resize */
        .small-cell {
            width: 50px; /* Set the width of the cell */
            height: 30px; /* Set the height of the cell */
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>Product A</td>
            <td>$10.00</td>
            <td class="small-cell">3</td> <!-- Apply the small-cell class to this cell -->
            <td>$30.00</td>
        </tr>
        <tr>
            <td>Product B</td>
            <td>$15.00</td>
            <td>2</td>
            <td>$30.00</td>
        </tr>
        <!-- ... other rows ... -->
    </table>
</body>
</html>

    In this example, we’ve added a CSS class called small-cell and applied it to the cell where you want to reduce the size. You can adjust the width and height values in the .small-cell style rule to control the size of that specific cell. This way, you can customize the size of individual cells in your table while keeping others at their default sizes.

    Login or Signup to reply.
  3. 0

    It seems you’re looking for something like this.

    table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
font-size:10px;
  text-align: center;
  border: 1px solid;
  padding: 8px;
}
tr:nth-child(1){
 background-color:  #80bfff;
}
tr:not(:nth-child(1)):not(:nth-child(n+5)){
 background-color:  #F0F8FF;
}
    <table>
  <h1 style="border:1px solid black;text-align:center;margin-bottom:0;background-color:#006bb3;color:white;">
    SALES BILL
  </h1>
  <tr>
    <th colspan="11">INPUT TEXTBOX</th>
    <th>INPUT TEXTBOX</th>
  </tr>
  <tr>
    <td colspan="5">ITEM NAME 1</td>
    <td colspan="2">100</td>
    <td colspan="2">2</td>
    <td>10</td>
    <td>210</td>
    <td rowspan="3"></td>
  </tr>
    <tr>
    <td colspan="5">ITEM NAME 2</td>
    <td colspan="2">100</td>
    <td colspan="2">2</td>
    <td>10</td>
    <td>210</td>
  </tr>
  </tr>
    <tr>
    <td colspan="5">ITEM NAME 3</td>
    <td colspan="2">100</td>
    <td colspan="2">2</td>
    <td>10</td>
    <td>210</td>
  </tr>
  <tr>
    <td rowspan="2">No of Item</td>
    <td rowspan="2">10</td>
    <td colspan="6">GST SUMMARY</td>
    <td rowspan="2" colspan="2">SUB TOTAL</td>
    <td rowspan="2">3200</td>
    <td rowspan="8"></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="2">GST 5%</td>
    <td rowspan="2">28.5</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
   <tr>
    <td rowspan="2">No of Qty</td>
    <td rowspan="2">20</td>
    <td></td>
    <td></td>
    <td></td>
    <td rowspan="2" colspan="2">DISCOUNT</td>
    <td rowspan="2">0</td>
  </tr>
  <tr>
    <td rowspan="2" colspan="2">GST 12%</td>
    <td rowspan="2">30.2</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td rowspan="2" colspan="2">TAX</td>
    <td rowspan="2">100</td>
  </tr>
  <tr>
    <td rowspan="2" colspan="2">GST 18%</td>
    <td rowspan="2">40.1</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td rowspan="2" colspan="2">NET.AMOUNT</td>
    <td rowspan="2">3300</td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

    You can actually achieve it by table grid system

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search