USWDS Table Coding Examples
Table examples - Last Reviewed February 2024
No Borders | Table with borders | Table with borders and shaded top row to indicate column headings | Table with borders and shaded top row to indicate column headings and center the table on the page
Default - No extra classes. No borders
Cell aligment within each cell with <td class="text-right"> More info at https://designsystem.digital.gov/components/table/
| FY 2021 Final |
FY 2022 Enacted |
FY 2023 President's Budget |
FY 2023 +/- FY 2022 |
|---|---|---|---|
| $460,746,000 | $463,787,000 | $471,998,000 | +$12,726,000 |
| 659 | 741 | 741 | 0 |
Table with borders
Table code <table class="usa-table"> More info at https://designsystem.digital.gov/components/table/
Right-align the text within each specified cell with <td class="text-right"> More info at https://designsystem.digital.gov/components/table/
| FY 2021 Final |
FY 2022 Enacted |
FY 2023 President's Budget |
FY 2023 +/- FY 2022 |
|---|---|---|---|
| $460,746,000 | $463,787,000 | $471,998,000 | +$12,726,000 |
| 659 | 741 | 741 | 0 |
Table with borders and shaded top row to indicate column headings
Table code <table class="usa-table"> More info at https://designsystem.digital.gov/components/table/
Right-align the text within each specified cell with <td class="text-right"> More info at https://designsystem.digital.gov/components/table/
Move rows containing <th scope="col"> into <thead> </thead> More info at https://designsystem.digital.gov/components/table/
| FY 2021 Final |
FY 2022 Enacted |
FY 2023 President's Budget |
FY 2023 +/- FY 2022 |
|---|---|---|---|
| $460,746,000 | $463,787,000 | $471,998,000 | +$12,726,000 |
| 659 | 741 | 741 | 0 |
Table with borders and shaded top row to indicate column headings and center the table on the page
Table code <table class="usa-table"> More info at https://designsystem.digital.gov/components/table/
Right-align the text within each specified cell with <td class="text-right"> More info at https://designsystem.digital.gov/components/table/
Move rows containing <th scope="col"> into <thead> </thead> More info at https://designsystem.digital.gov/components/table/
Table centered on the page my enclosing the table code within <div class="display-flex flex-column flex-align-center"> </div> . More info at https://designsystem.digital.gov/utilities/flex/
| FY 2021 Final |
FY 2022 Enacted |
FY 2023 President's Budget |
FY 2023 +/- FY 2022 |
|---|---|---|---|
| $460,746,000 | $463,787,000 | $471,998,000 | +$12,726,000 |
| 659 | 741 | 741 | 0 |
Last Reviewed: February 15, 2024