Now the table component only supports 2 columns, which is quite inconvenient. I need to output 7 columns.
Asking how to output a table with more than 2 columns has been a popular question over the past year in the forums.
This has been the best solution so far:
1 Like
There is also a tutorial for this one.
You can create your own table the way you want to:
<pre><span><style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 4px;
text-align: right;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #f2f2a2;}
#customers th {
padding-top: 9px;
padding-bottom: 9px;
text-align: center;
background-color: #04AA6D;
color: white;
}
</style>
<h2>Items for sale:</h2>
<table id="customers">
<tr>
<th>Item</th>
<th>Price</th>
<th>QTY</th>
<th>Total</th>
</tr>
<tr>
<td>Digital Air Fryer</td>
<td>$120.00</td>
<td>1</td>
<td>$120.00</td>
</tr>
<tr>
<td>Slot Toaster</td>
<td>$14.99</td>
<td>2</td>
<td>$29.98</td>
</tr>
<tr>
<td>Webcam</td>
<td>$159.99</td>
<td>5</td>
<td>$799.95</td>
</tr>
<tr>
<td>Printer</td>
<td>$199.99</td>
<td>1</td>
<td>$199.99</td>
</tr>
<tr>
<td>Monitor</td>
<td>$155.99</td>
<td>3</td>
<td>$467.97</td>
</tr>
</table>