Search code examples
html-tablesalesforcelwc

I don't know how to create an exact copy of such a table


I need to create a table in order to work further, but unfortunately I have no idea how to create this table enter image description here

I tried to make this table with tags, but it didn't work. I don’t know how to make a table header so that there is a Montn column with the cells Balance now and Montnly Average under Regional Express 2019

<template>
    <div class="slds-box slds-theme_default">
        
            <table class="slds-table slds-table_cell-buffer slds-table_bordered ">
                
                <thead>
                    <tr class="slds-m-around_medium">
                        <th class="contact">
                            <div class="slds-truncate" title="Name">Exp</div>
                            <div>MONTHS</div>

                        </th>
                            
                            
                        <th class="contact">
                            <div class="slds-truncate" title="Name">Of1</div>
                        </th>
                        <th class="contact">
                            <div class="slds-truncate" title="Name">Of2</div>
                        </th>
                        <th class="contact">
                            <div class="slds-truncate" title="Name">Of3</div>
                        </th>
                        <th class="contact">
                            <div class="slds-truncate" title="Name">SUMMM</div>
                        </th>
                    </tr>
                </thead>

                <tbody>
                    
                        <tr>
                            <td data-label="month">
                                MONTHS
                            </td>
                            <td data-label="month">
                               AMOUNT
                            </td>
                            <td data-label="month">
                               AMOUNT
                            </td>
                            <td data-label="month">
                               AMOUNT
                            </td>
                            <td data-label="month">
                                summ
                            </td>
                        </tr>

                      
                </tbody>

            </table>

    </div>
</template>

Solution

  • Have you heard about colspan/rowspan attributes?

    <table>
        <thead>
            <tr>
                <th colspan="2">Regional Expenses</th>
                <th>Of1</th>
                <th>Of2</th>
                <th>Of3</th>
                <th rowspan="4">Summ</th>
            </tr>
            <tr>
                <th rowspan="2">Month</th>
                <th>Balance now</th>
                <th>90</th>
                <th>-267</th>
                <th>195</th>
            </tr>
            <tr>
                <th>Monthly average</th>
                <th>55</th>
                <th>267</th>
                <th>77.50</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th colspan="2">Jan</th>
                <td>0</td>
                <td>0</td>
                <td>55</td>
                <td>55.00</td>
        </tbody>
    </table>
    

    Close enough?

    enter image description here