Table plugin

Basic usage

This plugin allows you to add and manage a table.

Add a table to the editor

Below is an example of a simple table with a header row.

Project & Pitch	Status	Technologies	Stars	Downloads	URL
Trumbowyg Lightweight WYSIWYG Editor	Active	JavaScript	~4 000 ★	70 000 / month	Landing GitHub
Monitoror Unified monitoring wallboard	Maintenance	Go Vue	~4 000 ★	100 000 +	Landing GitHub
Cookies EU Banner 1kb vanilla JS for cookie banner	Maintenance	JavaScript	~420 ★	4 000 / month	Landing GitHub
Colllect Bookmark Manager for Creatives	Paused	Symfony Vue	~340 ★		Landing GitHub
Check Disk Space Multi-platform disk space checker for Node.js	Maintenance	TypeScript	~78 ★	2 000 000 / month	GitHub
Column View Multi-columns page viewer	Maintenance	TypeScript Snabbdom	~7 ★		Landing GitHub

Tables with merged cells

Example of a pricing table.

Feature	Free	Premium	Business	Enterprise
Price	Free	5,99€ / user	12,99€ / user	22,99€ / user
Users	1	Unlimited		20 users minimum
Items	100			Unlimited
Bandwidth	5 Mbps			On your charge

Another tab with different merged cells:

Those plugins allow you to merge cells	And also unmerge	Two cells merged
You can see some examples on this page	Two horizontally merged too		Simple cell
Upload image	Pick, upload, and inserts an image	Next is empty

The code


$('#editor')
.trumbowyg({
    btns: [['table'], ['tableCellBackgroundColor', 'tableBorderColor']]
});

Setup

In head tag

At the end of body


<!-- Import jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>