Table
Static Table
The classic, full-width table. Best for small and simple datasets.
| Fruit | Serving Size (g) | Calories (kcal) | Vitamin C (%DV) |
|---|---|---|---|
| Apple | 182 | 95 | 14 |
| Banana | 118 | 105 | 17 |
| Orange | 131 | 62 | 85 |
| Nutritional data is approximate and based on standard serving sizes. | |||
Example Code
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Serving Size (g)</th>
<th>Calories (kcal)</th>
<th>Vitamin C (%DV)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td align="right">182</td>
<td align="center">95</td>
<td>14</td>
</tr>
<tr>
<td>Banana</td>
<td align="right">118</td>
<td align="center" >105</td>
<td>17</td>
</tr>
<tr>
<td>Orange</td>
<td align="right">131</td>
<td align="center">62</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Nutritional data is approximate and based on standard serving sizes.</td>
</tr>
</tfoot>
</table>
Striped Table
| Fruit | Serving Size (g) | Calories (kcal) | Vitamin C (%DV) |
|---|---|---|---|
| Apple | 182 | 95 | 14 |
| Banana | 118 | 105 | 17 |
| Orange | 131 | 62 | 85 |
| Nutritional data is approximate and based on standard serving sizes. | |||
Example Code
<table class="striped">
<thead>
<tr>
<th>Fruit</th>
<th>Serving Size (g)</th>
<th>Calories (kcal)</th>
<th>Vitamin C (%DV)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td align="right">182</td>
<td align="center">95</td>
<td>14</td>
</tr>
<tr>
<td>Banana</td>
<td align="right">118</td>
<td align="center" >105</td>
<td>17</td>
</tr>
<tr>
<td>Orange</td>
<td align="right">131</td>
<td align="center">62</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Nutritional data is approximate and based on standard serving sizes.</td>
</tr>
</tfoot>
</table>
Horizontal scroll table
When number of columns is large.
| Col 1 (ID) | Col 2 (Name) | Col 3 (Type) | Col 4 (Date) | Col 5 (Value A) | Col 6 (Value B) | Col 7 (Status) | Col 8 (Region) | Col 9 (Dept) | Col 10 (Project) | Col 11 (Metric 1) | Col 12 (Metric 2) | Col 13 (Setting X) | Col 14 (Setting Y) | Col 15 (Flag) | Col 16 (Notes) | Col 17 (Source) | Col 18 (Owner) | Col 19 (Link) | Col 20 (Action) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1001 | Alpha Report | Primary | 2025-01-15 | 125.50 | 78.22 | Complete | North | Finance | Q1-Budget | 450 | 0.89 | True | False | Active | Reviewed | System A | John D. | View | Edit |
| 1002 | Beta Analysis | Secondary | 2025-02-28 | 99.15 | 51.34 | Pending | South | Sales | Market-Eval | 320 | 0.75 | False | True | Inactive | Needs Data | CRM | Jane K. | View | Delete |
If we also want to freeze the first column, Let's check out fixed first column example
Example Code
<div class="overflow-auto">
<table>
<thead>
<tr>
<th>Col 1 (ID)</th>
<th>Col 2 (Name)</th>
<th>Col 3 (Type)</th>
<th>Col 4 (Date)</th>
<th>Col 5 (Value A)</th>
<th>Col 6 (Value B)</th>
<th>Col 7 (Status)</th>
<th>Col 8 (Region)</th>
<th>Col 9 (Dept)</th>
<th>Col 10 (Project)</th>
<th>Col 11 (Metric 1)</th>
<th>Col 12 (Metric 2)</th>
<th>Col 13 (Setting X)</th>
<th>Col 14 (Setting Y)</th>
<th>Col 15 (Flag)</th>
<th>Col 16 (Notes)</th>
<th>Col 17 (Source)</th>
<th>Col 18 (Owner)</th>
<th>Col 19 (Link)</th>
<th>Col 20 (Action)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>Alpha Report</td>
<td>Primary</td>
<td>2025-01-15</td>
<td>125.50</td>
<td>78.22</td>
<td>Complete</td>
<td>North</td>
<td>Finance</td>
<td>Q1-Budget</td>
<td>450</td>
<td>0.89</td>
<td>True</td>
<td>False</td>
<td>Active</td>
<td>Reviewed</td>
<td>System A</td>
<td>John D.</td>
<td><a href="#">View</a></td>
<td>Edit</td>
</tr>
<tr>
<td>1002</td>
<td>Beta Analysis</td>
<td>Secondary</td>
<td>2025-02-28</td>
<td>99.15</td>
<td>51.34</td>
<td>Pending</td>
<td>South</td>
<td>Sales</td>
<td>Market-Eval</td>
<td>320</td>
<td>0.75</td>
<td>False</td>
<td>True</td>
<td>Inactive</td>
<td>Needs Data</td>
<td>CRM</td>
<td>Jane K.</td>
<td><a href="#">View</a></td>
<td>Delete</td>
</tr>
</tbody>
</table>
</div>