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

Question

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

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>

score 0 · Accepted Answer · answered Nov 10 '22 at 00:11

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?

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

1 Answers1