web/htmlTableToolbar.html at main · Charette-AI-Group/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,
  shrink-to-fit=no">
  <meta name="description"
    content="Free Obsidian plugin: a Word-style toolbar for real HTML tables — insert rows and columns, merge and split cells, header rows, alignment, per-row and per-column borders, and cell shading.">
  <meta name="author" content="Charette AI Group">
  <title>HTML Table Toolbar — Obsidian Table Editing Plugin | Charette AI Group</title>
  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="css/business-frontpage.css?v=3" rel="stylesheet">
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apps</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="appsDropdown">
              <a class="dropdown-item" href="saeCalculator.html">SAE Fractional Calculator</a>
              <a class="dropdown-item" href="cloakClip.html">CloakClip</a>
              <a class="dropdown-item" href="frwb.html">FRWB</a>
              <a class="dropdown-item" href="pySPWB.html">pySPWB</a>
              <a class="dropdown-item" href="rvBackupHelper.html">RV Backup Helper</a>
              <a class="dropdown-item" href="htmlFontToolbar.html">HTML Font Toolbar</a>
              <a class="dropdown-item" href="htmlTableToolbar.html">HTML Table Toolbar</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="bg-primary pageBanner py-5 mb-5">
    <div class="container h-100">
      <div class="row h-100 align-items-center">
        <div class="col-lg-12">
          <h1 class="display-4 text-white mt-5 mb-2">HTML Table Toolbar</h1>
        </div>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <div class="container">

    <div class="row">
      <div class="col-md-8 mb-5">
        <h2>Objectives</h2>
        <hr>
        <p>A free plugin for <a href="https://obsidian.md">Obsidian</a> that adds a Word-style toolbar for <b>real HTML tables</b> in your notes. Markdown pipe tables cannot merge cells, shade an individual cell, hold multi-block content, or centre themselves on the page. This plugin writes and edits actual <code>&lt;table&gt;</code> markup instead, and puts a button on every structural edit that markup normally makes tedious.</p>
        <ul>
          <li><b>Insert</b> from a hover grid that picks the size, with an optional header row</li>
          <li><b>Rows and columns</b>: insert above, below, left or right, and delete</li>
          <li><b>Merge and split cells</b> &mdash; merge a selected rectangle, merge with the cell to the right or below, split a merged cell back apart</li>
          <li><b>Borders at three scopes</b>: a pattern for the whole table, plus individual row and column edges, each with its own thickness, line type and color</li>
          <li><b>Shade any cell</b> from an editable swatch grid or the system color picker, and align a cell, a whole column, or the table itself</li>
          <li>Optional <b>row and column markers</b> that label every cell with its coordinates in Source mode, so you always know where you are forty rows down</li>
          <li>Every button is also a command, so anything can be given a hotkey from Settings &rarr; Hotkeys</li>
          <li>Notes stay plain HTML, so they render identically even if the plugin is later removed</li>
        </ul>

        <h3 class="mt-4">Sister plugin to HTML Font Toolbar</h3>
        <p>This and <a href="htmlFontToolbar.html">HTML Font Toolbar</a> are built to the same house style and designed to sit side by side, but neither depends on the other &mdash; <b>install either one alone and it works completely</b>. Run both and they cooperate on purpose: the table strip measures the font toolbar and stacks above it rather than overlapping, shrinking to a compact single row when they share the bottom of the window and expanding when it has the space to itself. Each has its own ribbon icon, so either can be shown or hidden on its own.</p>

        <h3 class="mt-4">Worth knowing before you commit</h3>
        <p>Tables written as HTML render in Obsidian, Typora and VS Code, and keep their merged cells on GitHub, but Hugo and Pandoc drop raw HTML entirely. The bigger trade is editing rather than rendering: Obsidian's native table controls, Advanced Tables and Dataview all work on pipe tables and ignore <code>&lt;table&gt;</code>. That makes this a good fit for reference tables you build once and read often, and a poorer one for a document whose tables are still changing shape every day.</p>

        <h2 class="mt-5">Get the Plugin</h2>
        <hr>
        <p>Free and open source, for Obsidian on the desktop &mdash; available in the official Obsidian community plugin directory. In Obsidian, go to Settings &rarr; Community plugins &rarr; Browse and search for &ldquo;HTML Table Toolbar&rdquo;, or open the directory page below.</p>
        <a href="https://obsidian.md/plugins?id=html-table-toolbar" class="btn btn-primary">Install from Obsidian Community</a>
        <a href="https://github.com/Charette-AI-Group/html-table-toolbar" class="btn btn-primary">Plugin on GitHub</a>
        <p class="text-muted mt-3"><small>Manual install (alternative): download <b>main.js</b>, <b>manifest.json</b>, and <b>styles.css</b> from the <a href="https://github.com/Charette-AI-Group/html-table-toolbar/releases/latest">latest release</a> into <code>&lt;your vault&gt;/.obsidian/plugins/html-table-toolbar/</code>, then enable the plugin in Settings &rarr; Community plugins.</small></p>
      </div>
      <div class="col-md-4 mb-5">
        <img class="img-fluid rounded border mb-4" src="img/htmlTableToolbarScreenshot.png" alt="The insert-table dialog with its hover grid, above the table toolbar in an Obsidian note">
        <img class="img-fluid rounded border" src="img/htmlTableToolbarSettings.png" alt="The settings tab with toolbar behaviour options and editable cell background presets">
      </div>
    </div>
    <!-- /.row -->

    <div class="row">
      <div class="col-md-12 mb-5">
        <h2>Support This Work</h2>
        <hr>
        <p>HTML Table Toolbar is free, open source, has no ads, and collects nothing about you &mdash; it runs entirely inside your vault, and every table it writes is plain HTML that stays in your own notes. That is the way an Obsidian plugin ought to work, and it is also why plugins like this are hard to sustain: there is no data to sell and no subscription to bill, so nothing pays for the work behind them.</p>
        <p>Small tools take real time to build and, more importantly, to keep alive. Obsidian moves forward, the editor changes underneath a plugin, bugs surface in real use, and features get added because someone asked. A donation, however small, is what makes that continued attention possible &mdash; and it directly funds the next free tool as well as the upkeep of this one.</p>
        <p>If this toolbar saved you an evening of hand-editing table markup, please consider chipping in. It genuinely makes the difference between a project that keeps improving and one that quietly stops.</p>
        <a href="https://www.paypal.com/donate/?hosted_button_id=FEM4WLD7LHY36" class="btn btn-primary btn-lg" target="_blank" rel="noopener">Donate</a>
        <p class="text-muted mt-3"><small>Secure payment through PayPal &mdash; no account required, and any amount is appreciated. Thank you for supporting independent, free software.</small></p>
      </div>
    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->

  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Charette AI Group, 2026</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>