14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started

How to customize HTML table backgrounds in TinyMCE: color, image, and beyond

August 8th, 2023

5 min read

Multiple brushes paint the background color on three tables

Written by

Joe Robinson

Category

How-to Use TinyMCE

Despite once standing at the center of web design, the HTML table has more recently evolved into a formatting method used for complex information. Why? Because content creators can construct useful displays and convey complex information quickly when they use HTML tables. However, this process generally also involves changing the HTML table background color. So, what's an easy way to do this?

Replicating the ability to change table background color – which some software, like Excel, does really easily – can be tricky in both CMSs or document management systems. That’s because there’s more to building an HTML table background option than it seems at first glance.

TinyMCE is a reliable and flexible rich text editor that allows for simple table construction. With a few CSS lines and the TinyMCE API methods, it’s possible to create a setting for HTML table background color. This post explains how to do this, and includes a demo.

HTML tables background: impact on web design

During the early days of web development in the 1990s, HTML tables defined a nested grid structure as  a great structure for web design. It’s not, however, a design process that has carried through as web design continued to evolve.

Over time, HTML tables also changed their role within a website, and they’re now a method mainly used to display large amounts of data. To do this effectively, the table must have some way to guide the reader’s eye. Changing the HTML table background color can help achieve this goal of increased comprehension.

Customizing HTML table background color

The following procedure shows how you can create a table with different HTML table background color options to help guide the reader’s eye.

How to set up and customize the color of an HTML table background in TinyMCE

Before you start, getting a TinyMCE API key can help prevent domain name errors in the TinyMCE text area. Your API key also gives you free access to TinyMCE Premium plugins for 14 days. Head to the Get-tiny sign up page to get your FREE API key.

Setting up TinyMCE and the table plugin

  1. Create an index.html file in your development environment, and paste in the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE HTML Table background</title>
</head>
    <body>
        <textarea id="editor"></textarea>
    </body>
</html>
  1. Copy and paste the following link to TinyMCE – the CDN link – to access TinyMCE through Tiny Cloud, and replace the “your-api-key” string with your TinyMCE API key:

<script
  src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;
  1. Add another pair of script tags, and then paste the following JavaScript. It’s the tinymce.init method, and it’s where several important settings for the HTML table background color process are configured, such as the Advanced Table plugin:

    <script>
        tinymce.init({
        selector: '#editor',
        plugins: 'advtable powerpaste autolink advcode visualblocks visualchars image link media mediaembed table charmap pagebreak nonbreaking anchor insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter charmap linkchecker',
        toolbar: 'undo redo spellcheckdialog formatpainter | fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat',
        height: '700px'
            });
     </script>
  1. Save the changes, and then test run the index.html file by opening it in your browser, or use a local server command with Python or with the PHP command:

Getting the demo for the table background color started

  1. Include the Table plugin toolbar button in the TinyMCE toolbar option in the TinyMCE init script:

        toolbar: 'undo redo spellcheckdialog formatpainter | fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat | table',
  1. Save the change and then test out the TinyMCE table building abilities:

Adding a table to TinyMCE

Creating and changing HTML background color

There are a few methods you can use to do this:

  • Adjust the attributes of the table directly
  • Set up a CSS class and assign it to the table, tr, td, and th elements as needed
  • Use TinyMCE DOMUtils API methods to change the style rules for the editor, including the table style

The following procedures step through two of these methods: first, adjusting attributes directly, and then using API methods to add a table style rule.

  1. Include the Code plugin into the TinyMCE toolbar, and save the change:

        toolbar: 'undo redo spellcheckdialog formatpainter | fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat | table | code',
  1. Refresh the editor, and create a new table

  2. Open the Code plugin dialog to inspect the HTML. Add the following style attribute to the table element:

<table style="border-collapse: collapse; width: 100%; background-color: rgb(214, 238, 238);" border="1">
  1. Save the change and close the inspector window

The attribute saved

By manually adding attributes to the table, you can easily change the table background color. Rather than add attributes to the elements directly (not best practice for HTML table backgrounds), it’s better to set up a CSS class with the background color and add the class to the different table elements.

NOTE: While you can set the HTML table background color with a color name or a hex value, TinyMCE converts the color to RGBA format once you save the attributes. The advantage of this change is that it adds the ability to include opacity, which is an ideal design point for content and document table design.

Changing HTML table background color dynamically

Using TinyMCE’s API methods, you can dynamically change the HTML table background color, and change it to help guide the viewer's eyes over complex table information. The addStyle method is one of the TinyMCE DOM.util API methods. Running the API method through a function can create a style rule for TinyMCE that can adjust the HTML table background color.

  1. In the browser, open the developer console on the TinyMCE demo index.html page

  2. Copy the following command, and paste it into the console to run it – this adds a style element to TinyMCE that creates alternating table background colors to help guide the the reader’s eye:

tinymce.activeEditor.dom.addStyle(
  " tr:nth-child(even) { background-color: #D6EEEE; }"
);
  1. Check on the change to the table, which now has alternating background color:

The Alternating color added with the style change API method

Implementing HTML table background images

To implement HTML table background images, make use of the CSS background property along with the url option to specify the location of a specific image:

table {
    background: no-repeat url("template-document-cover-landscape@2x");
}

One point of HTML table background image best practice is to make sure that the width of the table and the image width line up with each other. Either line up the image and table width, or by designing the image such that it can tile or repeat seamlessly as the background image.

HTML table background next steps

Remember that within TinyMCE, you can set the HTML background color by adjusting the table HTML. In production, another solution could be to create a specific background color, and configure a TinyMCE’s addStyle or addClass API methods with a custom toolbar button to style the table background image more quickly.

Contact our support team for more information about HTML table background color or how TinyMCE can best support your web design plans.

HTMLDesign
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCESep 21st, 2023

    How to create fillable documents with TinyMCE

Join 100,000+ developers who get regular tips & updates from the Tiny team.