HTML Table editor that provides scoping and a visual editor so that the table meets Canada.ca web standards and the latest Web Experience Toolkit (WET) Style guidelines.
This tool is actively used to code tables in the Federal Budget and other Finance Canada publications.
The table output complies with TBS guidance found here: https://wet-boew.github.io/wet-boew-styleguide/design/tables-en.html
This project is regularly updated twice a year when performing critical analysis review for the Department of Finance's major reports: Federal Budget, and Economic and Fiscal Update (EFU) or Fall Economic Statement (FES).
This tool does not fully scope the tables. If the table is simple enough, it is recommended to use the WET table scoper before using this tool.
- Complex (ID and headers) scoping helper
- Interactive editor
- Horizontal alignment
- Indent
- Merge cells
- Bolding
- Toggle header row
- Create table footer
- Drag selection
- Simple Scoping
- Open
index.html - Once you copy the
<table>code from your HTML source, paste it and overwrite the contents in the HTML Input box - Press the Clean up button
- Click on cells within the Visual table to show the toolbar
Please feel free to create in Issue on Github to make a request or flag issues.
Scope Table: Adds scope attributes for row and column headings. On by default.
Financial table: Aligns all cells to the right except for row headings. Great for tables with numerical data. On by default.
Remove bold in rows: Attempts to remove bold for row headings. May not work depending on how the bolding is implemented. On by default.
Trim spaces: Removes non-breaking spaces and double spaces in row headings. On by default.
Move last row to footer: Moves the last row of the table to the table footer. One will be created if none exists. Useful for tables where tfoot content is the last row of the table.
Add empty footer: Adds an empty footer to the table. Useful for tables where the tfoot content is outside the table tags.
French number format: Experimental option. Style numbers into French format, mainly for thousands and decimal separators. Replaces all whitespace thousands separators with non-breaking space and all dot decimal separators with a comma.
- Drag selection in the Visual table may not work when selecting a merged cell (cell with colspan > 1)
- Releasing the mouse outside the Visual table will not complete the drag selection. You must release within the Visual table
- Cannot deselect cells. You must click on a single cell to deselect it or press the Deselect all button in the toolbar
This tool was initally created for the Department of Finance to automate the scoping process for increased accessibility. Additionally, complex HTML tables were very time-consuming to code, so the tool was later expanded so that tables can be modified within the webpage. This project has greatly decreased coding time for any report or publishing task. Prominent tool used for publishing the Canadian Federal Budget.
This project started in 2021 during my co-op term with Department of Finance. I am the sole developer on this project and I have been upgrading, expanding, and maintaining it since then.
I had a little bit of JavaScript and HTML experience at the time. In retrospect, I think I did a good job with the tool in terms of code design but it definitely can and should be refactored. However, in its current state, functional programming help divide the individual features.
Please feel free to reach out to me for feedback, issues, or requests at [email protected].