DEV Community: Olayiwola Akinnagbe

Web Table Accessibility Guide: ARIA, Keyboard Nav, and Screen Readers

Olayiwola Akinnagbe — Tue, 04 Aug 2026 08:00:00 +0000

Accessible tables are one of the most commonly missed areas of web
accessibility. A table without proper semantic markup is a grid of
cells with no relationship structure. A screen reader reads it as
a sequence of values with no context for which column or row each
value belongs to.

The four things that make a table accessible:

Semantic HTML. Use table, thead, tbody, th, and td. Do not build
tables with divs and CSS grid. Screen readers have built-in table
navigation that relies on the semantic elements.

Scope attributes. The scope attribute on th elements tells the screen
reader whether the header applies to a column (scope="col") or a row
(scope="row"). Without scope, the reader cannot tell which header
corresponds to which data cell.

Caption. The caption element provides a title for the table that is
announced before the table content. It is the equivalent of an alt
text for the table as a whole.

Keyboard navigation. Users who navigate by keyboard should be able
to move between cells, rows, and columns using arrow keys. The ARIA
grid pattern provides the interaction model for this. The table is
treated as a composite widget with keyboard-managed focus.

Tablesmit implements the ARIA grid pattern. The table editor is
navigable by keyboard using arrow keys, Tab, and Enter. Screen readers
announce cell content with the correct column header context. The
caption field is announced before the table content.

For exported tables, the PDF and PNG formats are not accessible in
the same way. They are visual representations. The LaTeX export
produces semantic table structure that LaTeX renders accessibly in
the compiled PDF through hyperref and accessibility packages.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/web-table-accessibility-guide. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

Table Builder Keyboard Shortcuts: Complete Guide

Olayiwola Akinnagbe — Sun, 02 Aug 2026 08:00:00 +0000

Keyboard shortcuts in a table editor matter for the same reason they
matter in any productivity tool: they keep your hands on the keyboard
and your focus on the content. Reaching for the mouse to add a row
or find a value is a context switch. A shortcut keeps you in the flow.

Here are the shortcuts in Tablesmit worth learning:

Navigation:
Tab moves to the next cell. Shift+Tab moves to the previous cell.
Arrow keys move between cells when a cell is selected. Enter confirms
a cell edit and moves to the cell below.

Editing:
Ctrl+Z (Cmd+Z on Mac) undoes the last action. Ctrl+Y (Cmd+Y) redoes.
Ctrl+C copies the selected cell. Ctrl+V pastes. Ctrl+A selects all
cells in the table.

Find and replace:
Ctrl+F (Cmd+F) opens the table-aware find panel. Ctrl+H (Cmd+H) opens
find and replace directly.

The find shortcut is worth highlighting because Tablesmit intercepts
the browser's default Ctrl+F behavior and replaces it with a table-aware
search. This means Ctrl+F finds values inside cells, not just visible
text on the page.

Export shortcuts are not currently bound to keyboard shortcuts. The
export panel is in the right sidebar. For frequent exports, the two-click
path (open export panel, click format) is the current workflow.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/table-builder-keyboard-shortcuts-guide. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

Offline Table Builder: Build Tables Without an Internet Connection

Olayiwola Akinnagbe — Sat, 01 Aug 2026 08:00:00 +0000

Most web tools stop working the moment you lose your internet
connection. For a table builder used on a train, in a conference
room with spotty wifi, or on a flight, this is a real problem.

Progressive Web Apps solve this through service workers, a background
script that caches the application assets and intercepts network
requests. When you open a PWA without internet access, the service
worker serves the cached version of the app. The tool works exactly
as it does online.

Tablesmit is a PWA. The first time you visit tablesmit.com, the
service worker caches the application. After that, you can open it
without internet access and every feature works: editing, formatting,
all export formats.

The exports (PDF, Excel, LaTeX, CSV, PNG, JPEG) all run client-side
using jsPDF, ExcelJS, and html2canvas. None of them require a server
call. The export file is generated in your browser and downloaded to
your device.

To install Tablesmit as a PWA: on Chrome or Edge, look for the install
icon in the address bar. On Safari on iOS, use Share → Add to Home Screen.
The installed app opens like a native application and works offline
without opening a browser first.

The offline capability also means your table data never leaves your
device. There is no server, no database, no sync. The table you build
exists only in your browser session until you export it.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/offline-table-builder. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

Markdown Table Generator Online: Build and Export in Seconds

Olayiwola Akinnagbe — Fri, 31 Jul 2026 08:00:00 +0000

Generating a Markdown table from scratch means counting pipes,
aligning columns visually, and getting the header separator row
right. For a small table this is quick. For a table with many
columns or specific alignment requirements, it is tedious.

The efficient approach is to build the table visually and export
the Markdown syntax, or to use a dedicated Markdown table generator.

Tablesmit builds the table visually. You type values into cells,
resize columns, set column types, and when you are done, the CSV
export gives you the data in a format that converts cleanly to
Markdown. Most Markdown environments also accept an image embed. The
PNG export gives you a table image you can include in your
Markdown document with the standard image syntax:

For GitHub READMEs, Markdown table syntax is the most accessible
format because it renders inline in the viewer without requiring
an external image. For that use case, the CSV export plus a
CSV-to-Markdown converter is the fastest path.

For Notion, Confluence, Medium, and similar platforms where Markdown
support is partial or absent, the PNG export gives you a table that
renders correctly regardless of platform.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/markdown-table-generator-online. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

How to Undo Table Edits Online

Olayiwola Akinnagbe — Mon, 27 Jul 2026 08:00:00 +0000

Undo is one of those features that you do not notice when it works
and immediately miss when it does not. In a table editor, undo needs
to cover not just typed values but structural changes: adding and
removing rows and columns, merging and unmerging cells, changing
column types, and resizing columns.

The keyboard shortcut is what most users expect: Ctrl+Z on Windows
and Linux, Cmd+Z on Mac. The undo depth (how many steps back you can go) determines how safe it feels to experiment.

Tablesmit intercepts the browser's default undo behavior and replaces
it with a table-aware undo stack. Each action (typing in a cell, resizing a column, merging cells, adding a row) is recorded as a
discrete step. Ctrl+Z or Cmd+Z undoes the most recent step. Ctrl+Y
or Cmd+Shift+Z redoes it.

The undo history persists for the duration of the browser session.
If you close the tab, the history is cleared. This is the honest
tradeoff of a client-side application with no user accounts. The
session state lives in the browser and does not persist between sessions.

For tables you are actively working on over multiple sessions, the
practical approach is to export to Excel after each significant edit.
The Excel file serves as your version history. You can open a previous
export to recover an earlier state.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-undo-table-editing-online. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

How to Make a Table in Markdown

Olayiwola Akinnagbe — Thu, 23 Jul 2026 08:00:00 +0000

Markdown tables use pipes to separate columns and hyphens to define
the header separator row. The basic syntax looks like this:

Column one	Column two	Column three
Value	Value	Value
Value	Value	Value

The hyphens in the second row create the visual header separator.
Column alignment is set with colons: :--- for left, ---: for right,
and :---: for center.

The main limitation of Markdown tables is that they require every
row to have the same number of cells separated by pipes, and the
alignment must be consistent. Building a large table by hand means
counting pipes and keeping the column widths consistent, which gets
tedious quickly.

Markdown also does not support merged cells. If you need a cell
that spans multiple columns, Markdown tables are not the right
format: you need HTML.

For quick tables with simple content, writing Markdown by hand is
fast. For tables with many columns, numeric formatting, or specific
alignment requirements, a visual builder is faster.

Tablesmit exports to CSV which you can convert to Markdown using
any number of online converters, or you can export to PNG and embed
the image in your Markdown document if the platform supports images.
GitHub READMEs, for example, render both Markdown tables and image
embeds.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-make-a-table-in-markdown. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

How to Make a Comparison Table (The Right Way)

Olayiwola Akinnagbe — Sat, 18 Jul 2026 08:00:00 +0000

A comparison table is one of the most common structures in technical
writing, product pages, and research documents. Done well, it lets
the reader make a decision at a glance. Done poorly, it is a wall of
text in grid form that is harder to read than a list.

The structural decisions that matter most: clear header labels in
the first row, consistent values down each column, and visual
differentiation between the header row and the data rows.

The column structure should follow the comparison logic. If you are
comparing tools, the first column is the tool name, subsequent columns
are criteria. If you are comparing options for a single tool, the
first column is the criterion, subsequent columns are the options.
Do not mix these patterns in the same table.

Boolean values (yes, no, available, not available) work better
as checkmarks than as text if the export format supports them.
In PDF and PNG exports, ✓ and ✗ are cleaner than the words.

For building comparison tables quickly: use Tablesmit's Feature Matrix
template as a starting point. It gives you a pre-structured header
row and data rows that you fill in. Set column types appropriately,
apply a theme for visual hierarchy, and export to PDF or PNG.

The PNG export is particularly useful for comparison tables that will
appear in Medium posts, Notion pages, or presentations. Formats that
either do not support tables natively or render them inconsistently.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-make-a-comparison-table. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

How to Freeze a Header Row in an Online Table

Olayiwola Akinnagbe — Wed, 15 Jul 2026 08:00:00 +0000

When a table is long enough to require scrolling, the header row
disappears as you scroll down and you lose the context for what
each column contains. This is the problem that frozen header rows
solve. The header stays visible while the data rows scroll beneath it.

In HTML, this is achieved with position: sticky on the header row.
The implementation sounds simple but gets complicated in tables with
merged cells, varying column widths, and custom borders. The sticky
position needs to account for the correct top offset, the z-index
needs to be right to prevent data rows from showing through, and
the border rendering needs to stay consistent at the boundary.

In Tablesmit, the freeze header option is in the toolbar. Click it
and the header row sticks to the top of the visible table area as
you scroll through long data. The column borders stay sharp at the
boundary and merged header cells stay correctly positioned.

You can also freeze the first column using the same toolbar. This
is useful for tables where the first column is a label (a method name, a date, or a category) and you want to keep it visible while
scrolling right through metric columns.

Both can be active simultaneously: frozen header row and frozen
first column together.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-freeze-header-row-in-table. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

How to Use Find and Replace in an Online Table

Olayiwola Akinnagbe — Tue, 14 Jul 2026 08:00:00 +0000

Find and replace in a table editor is one of those features that
seems minor until you need it. You have a thirty-row table and you
realize the product name in column one has a typo in twelve places.
Fixing it manually means clicking through every affected cell.

The standard browser find shortcut (Ctrl+F on Windows, Cmd+F on Mac) opens the browser's find bar, which searches the visible text on
the page but cannot replace values in table cells.

Tablesmit intercepts the find shortcut and opens a table-aware find
and replace panel instead. You type the search term, type the
replacement, and either step through each match to confirm it or
replace all occurrences at once. The search is across all cells in
the table, not just the visible ones if you have scrolled.

Ctrl+H opens the replace panel directly.

This is one of those features that is easy to overlook because it
uses a keyboard shortcut you already know from other applications.
The behavior is table-aware. It finds matches inside cell values, not just in the visible text, which is the important difference
from the browser's built-in find.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-find-and-replace-in-table. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

How to Auto-Sum a Column in an Online Table Builder

Olayiwola Akinnagbe — Sun, 05 Jul 2026 08:00:00 +0000

Auto-sum in a table builder sounds like it belongs in a spreadsheet,
but there is a specific use case that comes up constantly: you have
a results table or a data table with a numeric column, and you need
a total row at the bottom that adds up cleanly in the export.

Doing this manually is tedious. You calculate the sum, type it in,
and then rebuild it every time a value in the column changes. It is
also easy to get wrong when numbers involve decimal precision.

In Tablesmit, auto-sum works through column types. When you set a
column to Number, Currency, or Percentage, you can enable auto-sum
for that column from the column header menu. Tablesmit calculates
the sum of all values in the column and places it in a styled total
row at the bottom of the table.

The total carries through to every export format. In the PDF it
appears as a distinct row with clear formatting. In the Excel export
it appears as a value in the last row. In the LaTeX export it
appears as a final row before the closing \hline.

When any value in the column changes, the total updates automatically.
You do not manage it. You just build the table and the total stays
correct.

This is particularly useful for financial tables, experiment results
tables, and any analytical summary where the reader expects to see
the column total at a glance.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-auto-sum-columns-table. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

How to Add a Table to a Medium Post (Three Workarounds That Work)

Olayiwola Akinnagbe — Fri, 03 Jul 2026 13:00:00 +0000

Medium does not support native tables. This is a known limitation
that has been requested for years and has not been addressed.

There are three workarounds that actually work.

The first is the PNG method. Build your table in a tool that exports
clean images, export as PNG, and embed it as an image in Medium.
This works because Medium handles images cleanly across desktop,
tablet, and mobile. The table looks exactly as you built it. The
downside is that it is not interactive: readers cannot copy cells.
For most content purposes this does not matter.

The second is the GitHub Gist method. Create a Gist with a .html
filename, write your table in HTML, and paste the Gist URL into
Medium on its own line. Medium detects it as a Gist and embeds it.
The result looks like a code block rather than a document table,
which works for technical audiences and not for general readers.

The third is the Notion embed method. Make a Notion page public,
paste the share URL into Medium. Medium's Notion embed support is
inconsistent and may not work depending on when you test it.

For most writers, the PNG method is the right answer.

I built Tablesmit specifically for this workflow. You build the
table in the browser, export as PNG in one click, and drop it into
Medium. It takes about two minutes from start to finish.

Free, no account, MIT licensed. tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/how-to-add-table-to-medium-post. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.

Free Online Table Makers Compared: What They Get Right and Wrong

Olayiwola Akinnagbe — Thu, 02 Jul 2026 13:48:00 +0000

I built a table builder after spending too long evaluating every free
alternative I could find. Here is what I found.

Tables Generator is the most well-known option. It is functional and
supports LaTeX output, but the column type control is basic, the
interface feels dated, and the export options are limited compared
to what you actually need for professional documents.

Markdown Tables Generator does one thing and does it well: it
generates Markdown table syntax. If that is all you need, use it.
If you need a PDF or an Excel file, it is not the right tool.

Google Sheets is not a table builder but everyone uses it as one.
The data entry is fast and the collaboration is good, but the PDF
export looks like a spreadsheet and the LaTeX export requires a
third-party add-on that rarely produces clean output.

Notion tables are good for internal reference but the export options
are limited. There is no native LaTeX export and the PDF output
includes Notion's styling, not a clean document table.

What none of them do well: clean multi-format export from a tool
designed specifically for building one formatted table in a document.
That gap is what I built Tablesmit to fill.

Tablesmit supports drag-to-resize, merge cells, column types, table
captions, and export to PDF, Excel, LaTeX, CSV, PNG and JPEG. No
account. Works offline. MIT licensed.

tablesmit.com

This post originally appeared on the Tablesmit Blog at tablesmit.com/blog/free-online-table-makers-compared. Tablesmit is a free, open source table builder. Export to PDF, Excel, LaTeX, CSV, PNG. No account required. Try it at tablesmit.com.