lotte css

Tables

Basic Table

Product Inventory
Product Price Availability
Product A $25.99 In Stock
Product B $32.50 Limited
Product C $15.75 Out of Stock
Updated: May 10, 2023
<table>
  <caption>Product Inventory</caption>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Availability</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$25.99</td>
      <td>In Stock</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>$32.50</td>
      <td>Limited</td>
    </tr>
    <tr>
      <td>Product C</td>
      <td>$15.75</td>
      <td>Out of Stock</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Updated: May 10, 2023</td>
    </tr>
  </tfoot>
</table>

Table with Column and Row Headers

Quarterly Sales Data
Quarter Region A Region B Region C
Q1 $10,500 $8,200 $12,600
Q2 $12,400 $9,800 $14,200
Q3 $13,800 $10,500 $15,800
Q4 $16,200 $12,300 $18,400
<table>
  <caption>Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Region A</th>
      <th scope="col">Region B</th>
      <th scope="col">Region C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>$10,500</td>
      <td>$8,200</td>
      <td>$12,600</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td>$12,400</td>
      <td>$9,800</td>
      <td>$14,200</td>
    </tr>
    <tr>
      <th scope="row">Q3</th>
      <td>$13,800</td>
      <td>$10,500</td>
      <td>$15,800</td>
    </tr>
    <tr>
      <th scope="row">Q4</th>
      <td>$16,200</td>
      <td>$12,300</td>
      <td>$18,400</td>
    </tr>
  </tbody>
</table>

Table with Colgroup

Financial Data
Month Revenue Expenses
Domestic International Operations Marketing
January $45,000 $38,000 $28,000 $12,500
February $48,500 $41,200 $29,200 $13,800
March $51,300 $43,800 $30,100 $14,200
<table>
  <caption>Financial Data</caption>
  <colgroup>
    <col>
    <col span="2" class="revenue">
    <col span="2" class="expenses">
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2">Month</th>
      <th colspan="2">Revenue</th>
      <th colspan="2">Expenses</th>
    </tr>
    <tr>
      <th>Domestic</th>
      <th>International</th>
      <th>Operations</th>
      <th>Marketing</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>January</th>
      <td>$45,000</td>
      <td>$38,000</td>
      <td>$28,000</td>
      <td>$12,500</td>
    </tr>
    <tr>
      <th>February</th>
      <td>$48,500</td>
      <td>$41,200</td>
      <td>$29,200</td>
      <td>$13,800</td>
    </tr>
    <tr>
      <th>March</th>
      <td>$51,300</td>
      <td>$43,800</td>
      <td>$30,100</td>
      <td>$14,200</td>
    </tr>
  </tbody>
</table>