Example:
Create a LWC components with static headers, rows and columns values.
Solutions:
1. Create a Lightning Web Component named as "lwcTableExample". System will automatically create 3 files (lwcTableExample.html, lwcTableExample.js, lwcTableExample.js-meta.xml) under "lwc" folder (default location).
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
3. Copy paste the below line of code for lwcTableExample.html
<template>
<table class="slds-table slds-table_bordered slds-border_left slds-border_right">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div title="hd1">Header 1</div>
</th>
<th scope="col">
<div title="hd2">Header 2</div>
</th>
<th scope="col">
<div title="hd3">Header 3</div>
</th>
</tr>
</thead>
<tbody>
<tr class="slds-text-title_caps">
<td scope="col">
<div title="row1col1">Row1 Col1</div>
</td>
<td scope="col">
<div title="row1col2">Row1 Col2</div>
</td>
<td scope="col">
<div title="row1col3">Row1 Col3</div>
</td>
</tr>
<tr class="slds-text-title_caps">
<td scope="col">
<div title="row2col1">Row2 Col1</div>
</td>
<td scope="col">
<div title="row2col2">Row2 Col2</div>
</td>
<td scope="col">
<div title="row2col3">Row2 Col3</div>
</td>
</tr>
<tr class="slds-text-title_caps">
<td scope="col">
<div title="row3col1">Row3 Col1</div>
</td>
<td scope="col">
<div title="row3col2">Row3 Col2</div>
</td>
<td scope="col">
<div title="row3col3">Row3 Col3</div>
</td>
</tr>
</tbody>
</table>
</template>
4. As I am showing this example with static value, so no change is required for file lwcTableExample.js
5. Now create a Lightning App Builder and assign this component and from then check the output and it will look like below,
