Accounting Tables
Code Snippet Library
Basic Accounting Table
This is basic accounting table with the first column left-aligned, Columns 2 and 3 right-aligned, Column 4 centered, and width set to auto. Blank cells should include a symbol, such as a dash, a zero, or "n/a." In this case, the width is set to auto to minimize white space between columns and make it easier to read.
| Types of Things | Header 1 | Header 2 | Header 3 |
|---|---|---|---|
| Thing 1 | 1.00 | 2.00 | - |
| Thing 2 | 4.00 | 5.00 | - |
Code: Basic Accounting Table
<table style="border-collapse: collapse; width: auto;" border="1" cellpadding="5">
<caption>Basic Accounting Table</caption>
<tbody>
<tr>
<th scope="col">Types of Things</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
<tr>
<th scope="row">Thing 1</th>
<td style="text-align: right;">1.00</td>
<td style="text-align: right;">2.00</td>
<td style="text-align: center;">-</td>
</tr>
<tr>
<th scope="row">Thing 2</th>
<td style="text-align: right;">4.00</td>
<td style="text-align: right;">5.00</td>
<td style="text-align: center;">-</td>
</tr>
</tbody>
</table>
Accounting Table Without Borders
Following is an accounting table without borders that includes subtotals (single underlined) and totals (double underlined). It hsa fixed widths to maintain this layout so it is not responsive. Also note that there are dashes to indicate blank cells that have been visually hidden, but will be read by a screen reader. (More information can be found on the Screen Reader Only Text page of the the Page Formatting module in this resource.)
| Fees Earned | $1,500 | |
|---|---|---|
| Expenses: | ||
| Supplies Expense | $300 | |
| Utilities Expense | 400 | |
| Total Expenses | 700 | |
| Net Income | $800 |
Code: Accounting Table Without Borders
<table style="border-collapse: collapse; width: 436px; height: 221px;" border="0" cellpadding="5">
<caption><strong>ABC Tax </strong>
<br /><strong>Income Statement </strong>
<br /><strong>For the month ended February 28, 20xx</strong>
</caption>
<tbody>
<tr style="height: 56px;">
<th style="text-align: left; width: 257.667px; height: 56px;" scope="row">Fees Earned</th>
<td style="width: 101.667px; height: 56px; text-align: center; position: absolute; left: -10000px; overflow: hidden;">-</td>
<td style="width: 128.667px; height: 56px; text-align: right;">$1,500</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257.667px; height: 33px;" scope="row">Expenses:</th>
<td style="width: 101.667px; height: 33px; text-align: center; position: absolute; left: -10000px; overflow: hidden;">-</td>
<td style="width: 128.667px; height: 33px; text-align: center; position: absolute; left: -10000px; overflow: hidden;">-</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257.667px; height: 33px;" scope="row"> Supplies Expense</th>
<td style="text-align: right; width: 101.667px; height: 33px;">$300</td>
<td style="width: 128.667px; height: 33px; text-align: center; position: absolute; left: -10000px; overflow: hidden;">-</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257.667px; height: 33px;" scope="row"> Utilities Expense</th>
<td style="text-align: right; width: 101.667px; height: 33px;">
<span style="border-bottom: 1px solid black;"> 400 </span>
</td>
<td style="width: 128.667px; height: 33px; text-align: center; position: absolute; left: -10000px; overflow: hidden;">-</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257.667px; text-align: right; height: 33px;" scope="row">Total Expenses</th>
<td style="width: 101.667px; height: 33px; text-align: center; position: absolute; left: -10000px; overflow: hidden;">-</td>
<td style="text-align: right; width: 128.667px; height: 33px;">
<span style="border-bottom: 1px solid black;">700</span>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257.667px; text-align: left; height: 33px;" scope="row">Net Income</th>
<td style="width: 101.667px; height: 33px; text-align: center; position: absolute; left: -10000px; overflow: hidden;">-</td>
<td style="text-align: right; width: 128.667px; height: 33px;">
<span style="border-bottom: double black;">$800</span>
</td>
</tr>
</tbody>
</table>
Accounting Table with Outside Box Borders
This is an accounting table that includes subtotals (single underlined) and totals (double underlined) with an outside border using box code. This table has fixed widths to maintain the layout so it is not responsive and there are dashes in the blank cells that have been hidden visually but will be read by a screen reader.
| Fees Earned | $1,500 | |
|---|---|---|
| Expenses: | ||
| Supplies Expense | $300 | |
| Utilities Expense | 400 | |
| Total Expenses | 700 | |
| Net Income | $800 |
Code: Accounting Table with Outside Border Using Box Code
<div style="border: 2px solid #1E407C; padding: 15px; width: 436px; height: 221px; display: table;">
<table style="border-collapse: collapse; width: 436px; height: 221px;" border="0" cellpadding="5">
<caption><strong>ABC Tax </strong>
<br /><strong>Income Statement </strong>
<br /><strong>For the month ended February 28, 20xx</strong>
</caption>
<tbody>
<tr style="height: 56px;">
<th style="text-align: left; width: 257px; height: 56px;" scope="row">Fees Earned</th>
<td style="width: 101px; height: 56px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="width: 128px; height: 56px; text-align: right;">$1,500</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257px; height: 33px;" scope="row">Expenses:</th>
<td style="width: 101px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="width: 128px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257px; height: 33px;" scope="row"> Supplies Expense</th>
<td style="text-align: right; width: 101px; height: 33px;">$300</td>
<td style="width: 128px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257px; height: 33px;" scope="row"> Utilities Expense</th>
<td style="text-align: right; width: 101px; height: 33px;">
<span style="border-bottom: 1px solid black;"> 400 </span>
</td>
<td style="width: 128px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257px; text-align: right; height: 33px;" scope="row">Total Expenses</th>
<td style="width: 101px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="text-align: right; width: 128px; height: 33px;">
<span style="border-bottom: 1px solid black;">700</span>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257px; text-align: left; height: 33px;" scope="row">Net Income</th>
<td style="width: 101px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="text-align: right; width: 128px; height: 33px;">
<span style="border-bottom: double black;">$800</span>
</td>
</tr>
</tbody>
</table>
</div>
Accounting Table with Outside Borders
This is an accounting table that includes subtotals (single underline) and totals (double underline) with an outside border.
| Fees Earned | $1,500 | |
|---|---|---|
| Expenses: | ||
| Supplies Expense | $300 | |
| Utilities Expense | 400 | |
| Total Expenses | 700 | |
| Net Income | $800 |
Code: Accounting Table with Outside Borders
<table style="border-collapse: collapse; width: 436px; height: 221px; border-style: solid; border-width: 1px;" cellpadding="5">
<caption><strong>ABC Tax </strong>
<br /><strong>Income Statement </strong>
<br /><strong>For the month ended February 28, 20xx</strong>
</caption>
<tbody>
<tr style="height: 56px;">
<th style="text-align: left; width: 257px; height: 56px;" scope="row">Fees Earned</th>
<td style="width: 101px; height: 56px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="width: 128px; height: 56px; text-align: right;">$1,500</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257px; height: 33px;" scope="row">Expenses:</th>
<td style="width: 101px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="width: 128px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257px; height: 33px;" scope="row"> Supplies Expense</th>
<td style="text-align: right; width: 101px; height: 33px;">$300</td>
<td style="width: 128px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
</tr>
<tr style="height: 33px;">
<th style="text-align: left; width: 257px; height: 33px;" scope="row"> Utilities Expense</th>
<td style="text-align: right; width: 101px; height: 33px;">
<span style="border-bottom: 1px solid black;"> 400 </span>
</td>
<td style="width: 128px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257px; text-align: right; height: 33px;" scope="row">Total Expenses</th>
<td style="width: 101px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="text-align: right; width: 128px; height: 33px;">
<span style="border-bottom: 1px solid black;">700</span>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257px; text-align: left; height: 33px;" scope="row">Net Income</th>
<td style="width: 101px; height: 33px; text-align: center;">
<div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">-</div>
</td>
<td style="text-align: right; width: 128px; height: 33px;">
<span style="border-bottom: double black;">$800</span>
</td>
</tr>
</tbody>
</table>
Quick Tip: Single and Double Underline
Accounting content includes underlines and double underlines, which can be tricky to code. For best results, use a black bottom border for underlining in tables. For example, this subtotal $905,156 uses a bottom border of 1px in solid black and this total $905,156 uses a double bottom border in black. Other methods for underlining do not work well in accounting applications because the underline disappears under some symbols, such as the dollar sign, parenthesis, and comma. For example, $(905,156).
Code: Single and Double Bottom Borders
Single Black Bottom Border
<span style="border-bottom: 1px solid black;">$905,156</span>
Double Black Bottom Border
<span style="border-bottom: double black;">$905,156</span>
Alternative: Embedding an Excel File
An alternative to using complex accounting tables is to embed the Excel file on the Canvas page. Excel files contain built-in structure and accessibility features that can make navigation easier. An Excel file can be embedded in one of three ways:
- Overlay preview: the window containing the file opens in the same tab as the content page Complex Accounting Table.xlsx Download Complex Accounting Table.xlsx;
- Inline preview: the file opens on the content page Complex Accounting Table.xlsx Download Complex Accounting Table.xlsx; or
- Inline preview, expanded by default: Complex Accounting Table.xlsx Download Complex Accounting Table.xlsx.