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.
<table style="border-collapse: collapse; width: auto;" border="1" cellpadding="5">
<caption>Basic Accounting Table</caption>
<tbody>
<tr style="background-color: #BE0000; color: #FFFFFF;">
<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" style="background-color: #E2E6E6;">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" style="background-color: #E2E6E6;">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>
Click to copy
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. (Moreinformation can be found on the Screen Reader Only Text page of the the Page Formatting module in this resource.)
<table style="border-collapse: collapse; width: 436px; height: 221px;" border="0" cellpadding="5">
<caption style="color: #BE0000;"><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; color: #BE0000;" 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; color: #BE0000;" 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 #BE0000;"> 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; color: #BE0000;" 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 #BE0000;">700</span>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257.667px; text-align: left; height: 33px; color: #BE0000;" 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 #BE0000;">$800</span>
</td>
</tr>
</tbody>
</table>
Click to copy
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.
<div style="border: 2px solid #BE0000; padding: 15px; width: 436px; height: 221px; display: table;">
<table style="border-collapse: collapse; width: 436px; height: 221px;" border="0" cellpadding="5">
<caption style="color: #BE0000;"><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; color: #BE0000;" 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; color: #BE0000;" 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 #BE0000;"> 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; color: #BE0000;" 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 #BE0000;">700</span>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257px; text-align: left; height: 33px; color: #BE0000;" 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 #BE0000;">$800</span>
</td>
</tr>
</tbody>
</table>
</div>
Click to copy
Accounting Table with Outside Borders
This is an accounting table that includes subtotals (single underline) and totals (double underline) with an outside border.
<table style="border-collapse: collapse; width: 436px; height: 221px; border-style: solid; border-width: 1px; border-color: #BE0000;" cellpadding="5">
<caption style="color: #BE0000;"><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; color: #BE0000;" 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; color: #BE0000;" 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 #BE0000;"> 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; color: #BE0000;" 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 #BE0000;">700</span>
</td>
</tr>
<tr style="height: 33px;">
<th style="width: 257px; text-align: left; height: 33px; color: #BE0000;" 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 #BE0000;">$800</span>
</td>
</tr>
</tbody>
</table>
Click to copy
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).
Single Black Bottom Border
<span style="border-bottom: 1px solid black;">$905,156</span>
Click to copy
Double Black Bottom Border
<span style="border-bottom: double black;">$905,156</span>
Click to copy
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 pageComplex Accounting Table.xlsxDownload Complex Accounting Table.xlsx;
- Inline preview:the file opens on the content pageComplex Accounting Table.xlsxDownload Complex Accounting Table.xlsx; or
- Inline preview, expanded by default:Complex Accounting Table.xlsxDownload Complex Accounting Table.xlsx.
0 Comments
Add your comment