# Multiple Tables


# Side-by-Side Comparisons

Multiple shortcodes on one page, each with different files:


## Students (CSV)


<table class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_title gt_font_normal"><div style="padding-top: 0; padding-bottom: 7px;">
<span class="gd-tbl-badge" style="background-color: #FFF8E1; color: #7A6200; border: 1px solid #FFF8E1; margin-right: 8px;">CSV</span>Rows10Columns5
</div></th>
</tr>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_subtitle gt_font_normal">Top 3 Students</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"></th>
<th id="name" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

name

<em>str</em>

</div></th>
<th id="subject" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

subject

<em>str</em>

</div></th>
<th id="score" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

score

<em>f64</em>

</div></th>
<th id="grade" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

grade

<em>str</em>

</div></th>
<th id="passed" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

passed

<em>bool</em>

</div></th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_right gd-tbl-rownum">0</td>
<td class="gt_row gt_left" style="max-width: 97px">Alice</td>
<td class="gt_row gt_left" style="max-width: 102px">Math</td>
<td class="gt_row gt_right" style="max-width: 86px">95.5</td>
<td class="gt_row gt_left" style="max-width: 86px">A</td>
<td class="gt_row gt_left" style="max-width: 94px">True</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">1</td>
<td class="gt_row gt_left" style="max-width: 97px">Bob</td>
<td class="gt_row gt_left" style="max-width: 102px">Science</td>
<td class="gt_row gt_right" style="max-width: 86px">82</td>
<td class="gt_row gt_left" style="max-width: 86px">B</td>
<td class="gt_row gt_left" style="max-width: 94px">True</td>
</tr>
<tr class="gd-tbl-divider">
<td class="gt_row gt_right gd-tbl-rownum">2</td>
<td class="gt_row gt_left" style="max-width: 97px">Charlie</td>
<td class="gt_row gt_left" style="max-width: 102px">English</td>
<td class="gt_row gt_right" style="max-width: 86px">71.3</td>
<td class="gt_row gt_left" style="max-width: 86px">C</td>
<td class="gt_row gt_left" style="max-width: 94px">True</td>
</tr>
</tbody>
</table>


## Products (TSV)


<table class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_title gt_font_normal"><div style="padding-top: 0; padding-bottom: 7px;">
<span class="gd-tbl-badge" style="background-color: #E8F5E9; color: #2E7D32; border: 1px solid #E8F5E9; margin-right: 8px;">TSV</span>Rows7Columns5
</div></th>
</tr>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_subtitle gt_font_normal">Top 3 Products</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"></th>
<th id="product" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

product

<em>str</em>

</div></th>
<th id="category" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

category

<em>str</em>

</div></th>
<th id="price" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

price

<em>f64</em>

</div></th>
<th id="stock" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

stock

<em>i64</em>

</div></th>
<th id="rating" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

rating

<em>f64</em>

</div></th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_right gd-tbl-rownum">0</td>
<td class="gt_row gt_left" style="max-width: 96px">Widget</td>
<td class="gt_row gt_left" style="max-width: 120px">Electronics</td>
<td class="gt_row gt_right" style="max-width: 80px">29.99</td>
<td class="gt_row gt_right" style="max-width: 80px">150</td>
<td class="gt_row gt_right" style="max-width: 88px">4.5</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">1</td>
<td class="gt_row gt_left" style="max-width: 96px">Gadget</td>
<td class="gt_row gt_left" style="max-width: 120px">Tools</td>
<td class="gt_row gt_right" style="max-width: 80px">49.5</td>
<td class="gt_row gt_right" style="max-width: 80px">80</td>
<td class="gt_row gt_right" style="max-width: 88px">3.8</td>
</tr>
<tr class="gd-tbl-divider">
<td class="gt_row gt_right gd-tbl-rownum">2</td>
<td class="gt_row gt_left" style="max-width: 96px">Gizmo</td>
<td class="gt_row gt_left" style="max-width: 120px">Kitchen</td>
<td class="gt_row gt_right" style="max-width: 80px">12</td>
<td class="gt_row gt_right" style="max-width: 80px">300</td>
<td class="gt_row gt_right" style="max-width: 88px">4.9</td>
</tr>
</tbody>
</table>


## Server Logs (JSONL)


<table class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="5" class="gt_heading gt_title gt_font_normal"><div style="padding-top: 0; padding-bottom: 7px;">
<span class="gd-tbl-badge" style="background-color: #E3F2FD; color: #1565C0; border: 1px solid #E3F2FD; margin-right: 8px;">JSONL</span>Rows6Columns4
</div></th>
</tr>
<tr class="gt_heading">
<th colspan="5" class="gt_heading gt_subtitle gt_font_normal">Recent Logs</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"></th>
<th id="timestamp" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

timestamp

<em>str</em>

</div></th>
<th id="level" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

level

<em>str</em>

</div></th>
<th id="module" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

module

<em>str</em>

</div></th>
<th id="message" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

message

<em>str</em>

</div></th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_right gd-tbl-rownum">0</td>
<td class="gt_row gt_left" style="max-width: 153px">2025-01-15T08:30:00</td>
<td class="gt_row gt_left" style="max-width: 66px">INFO</td>
<td class="gt_row gt_left" style="max-width: 63px">auth</td>
<td class="gt_row gt_left" style="max-width: 218px">User login successful</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">1</td>
<td class="gt_row gt_left" style="max-width: 153px">2025-01-15T08:31:12</td>
<td class="gt_row gt_left" style="max-width: 66px">WARNING</td>
<td class="gt_row gt_left" style="max-width: 63px">db</td>
<td class="gt_row gt_left" style="max-width: 218px">Slow query detected (3.2s)</td>
</tr>
<tr class="gd-tbl-divider">
<td class="gt_row gt_right gd-tbl-rownum">2</td>
<td class="gt_row gt_left" style="max-width: 153px">2025-01-15T08:32:45</td>
<td class="gt_row gt_left" style="max-width: 66px">ERROR</td>
<td class="gt_row gt_left" style="max-width: 63px">api</td>
<td class="gt_row gt_left" style="max-width: 218px">Request timeout on /v2/users</td>
</tr>
</tbody>
</table>


# Wide Table

A 13-column metrics table with horizontal scroll:


<table class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="14" class="gt_heading gt_title gt_font_normal"><div style="padding-top: 0; padding-bottom: 7px;">
<span class="gd-tbl-badge" style="background-color: #FFF8E1; color: #7A6200; border: 1px solid #FFF8E1; margin-right: 8px;">CSV</span>Rows5Columns13
</div></th>
</tr>
<tr class="gt_heading">
<th colspan="14" class="gt_heading gt_subtitle gt_font_normal">Monthly Metrics 2025</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"></th>
<th id="metric" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

metric

<em>str</em>

</div></th>
<th id="jan" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

jan

<em>f64</em>

</div></th>
<th id="feb" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

feb

<em>f64</em>

</div></th>
<th id="mar" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

mar

<em>f64</em>

</div></th>
<th id="apr" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

apr

<em>f64</em>

</div></th>
<th id="may" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

may

<em>f64</em>

</div></th>
<th id="jun" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

jun

<em>f64</em>

</div></th>
<th id="jul" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

jul

<em>f64</em>

</div></th>
<th id="aug" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

aug

<em>f64</em>

</div></th>
<th id="sep" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

sep

<em>f64</em>

</div></th>
<th id="oct" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

oct

<em>f64</em>

</div></th>
<th id="nov" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

nov

<em>f64</em>

</div></th>
<th id="dec" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

dec

<em>f64</em>

</div></th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_right gd-tbl-rownum">0</td>
<td class="gt_row gt_left" style="max-width: 88px">revenue</td>
<td class="gt_row gt_right" style="max-width: 52px">120.5</td>
<td class="gt_row gt_right" style="max-width: 52px">135.2</td>
<td class="gt_row gt_right" style="max-width: 52px">128.7</td>
<td class="gt_row gt_right" style="max-width: 52px">142.3</td>
<td class="gt_row gt_right" style="max-width: 52px">155.8</td>
<td class="gt_row gt_right" style="max-width: 52px">148.9</td>
<td class="gt_row gt_right" style="max-width: 52px">162.1</td>
<td class="gt_row gt_right" style="max-width: 52px">170.4</td>
<td class="gt_row gt_right" style="max-width: 52px">165.3</td>
<td class="gt_row gt_right" style="max-width: 52px">178.2</td>
<td class="gt_row gt_right" style="max-width: 52px">185.6</td>
<td class="gt_row gt_right" style="max-width: 50px">192</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">1</td>
<td class="gt_row gt_left" style="max-width: 88px">costs</td>
<td class="gt_row gt_right" style="max-width: 52px">80.1</td>
<td class="gt_row gt_right" style="max-width: 52px">82.3</td>
<td class="gt_row gt_right" style="max-width: 52px">79.5</td>
<td class="gt_row gt_right" style="max-width: 52px">85.2</td>
<td class="gt_row gt_right" style="max-width: 52px">90.1</td>
<td class="gt_row gt_right" style="max-width: 52px">88.7</td>
<td class="gt_row gt_right" style="max-width: 52px">95.3</td>
<td class="gt_row gt_right" style="max-width: 52px">100.2</td>
<td class="gt_row gt_right" style="max-width: 52px">97.8</td>
<td class="gt_row gt_right" style="max-width: 52px">105.1</td>
<td class="gt_row gt_right" style="max-width: 52px">110.3</td>
<td class="gt_row gt_right" style="max-width: 50px">115</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">2</td>
<td class="gt_row gt_left" style="max-width: 88px">users</td>
<td class="gt_row gt_right" style="max-width: 52px">1200</td>
<td class="gt_row gt_right" style="max-width: 52px">1350</td>
<td class="gt_row gt_right" style="max-width: 52px">1280</td>
<td class="gt_row gt_right" style="max-width: 52px">1420</td>
<td class="gt_row gt_right" style="max-width: 52px">1558</td>
<td class="gt_row gt_right" style="max-width: 52px">1489</td>
<td class="gt_row gt_right" style="max-width: 52px">1621</td>
<td class="gt_row gt_right" style="max-width: 52px">1704</td>
<td class="gt_row gt_right" style="max-width: 52px">1653</td>
<td class="gt_row gt_right" style="max-width: 52px">1782</td>
<td class="gt_row gt_right" style="max-width: 52px">1856</td>
<td class="gt_row gt_right" style="max-width: 50px">1920</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">3</td>
<td class="gt_row gt_left" style="max-width: 88px">sessions</td>
<td class="gt_row gt_right" style="max-width: 52px">3500</td>
<td class="gt_row gt_right" style="max-width: 52px">3800</td>
<td class="gt_row gt_right" style="max-width: 52px">3600</td>
<td class="gt_row gt_right" style="max-width: 52px">4100</td>
<td class="gt_row gt_right" style="max-width: 52px">4500</td>
<td class="gt_row gt_right" style="max-width: 52px">4200</td>
<td class="gt_row gt_right" style="max-width: 52px">4800</td>
<td class="gt_row gt_right" style="max-width: 52px">5100</td>
<td class="gt_row gt_right" style="max-width: 52px">4900</td>
<td class="gt_row gt_right" style="max-width: 52px">5300</td>
<td class="gt_row gt_right" style="max-width: 52px">5600</td>
<td class="gt_row gt_right" style="max-width: 50px">5800</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">4</td>
<td class="gt_row gt_left" style="max-width: 88px">conversion</td>
<td class="gt_row gt_right" style="max-width: 52px">3.2</td>
<td class="gt_row gt_right" style="max-width: 52px">3.5</td>
<td class="gt_row gt_right" style="max-width: 52px">3.1</td>
<td class="gt_row gt_right" style="max-width: 52px">3.8</td>
<td class="gt_row gt_right" style="max-width: 52px">4</td>
<td class="gt_row gt_right" style="max-width: 52px">3.7</td>
<td class="gt_row gt_right" style="max-width: 52px">4.2</td>
<td class="gt_row gt_right" style="max-width: 52px">4.5</td>
<td class="gt_row gt_right" style="max-width: 52px">4.3</td>
<td class="gt_row gt_right" style="max-width: 52px">4.6</td>
<td class="gt_row gt_right" style="max-width: 52px">4.8</td>
<td class="gt_row gt_right" style="max-width: 50px">5</td>
</tr>
</tbody>
</table>
