# Document Editor: Formatting Table Cells Using JavaScript > This article explains how to format table cells in the Document Editor using JavaScript. It shows how to change the background color and frames of a table cell. - **Author:** Bjoern Meyer - **Published:** 2024-06-18 - **Modified:** 2026-07-17 - **Description:** This article explains how to format table cells in the Document Editor using JavaScript. It shows how to change the background color and frames of a table cell. - **2 min read** (338 words) - **Tags:** - ASP.NET - Tables - **Web URL:** https://www.textcontrol.com/blog/2024/06/18/document-editor-formatting-table-cells-using-javascript/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/06/18/document-editor-formatting-table-cells-using-javascript/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/06/18/document-editor-formatting-table-cells-using-javascript/llms-full.txt --- The JavaScript API is a set of functions that allow you to interact with the document. You can use it to manipulate any part of the document, including paragraphs, images and even tables. It is very easy to add a new table to the document using the JavaScript API. Here is an example: ``` TXTextControl.tables.add(5, 5, 10, function(e) { if (e === true) { // if added TXTextControl.tables.getItem(function(table) { table.cells.forEach(function(cell) { cell.setText("Cell Text"); }); }, null, 10); } }) ``` This code creates a new table with 5 rows and 5 columns. The table is inserted at the current input position: ![Tables in TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/06/18/a/assets/tables1.webp "Tables in TX Text Control") ### Setting the TableCellFormat To format the borders of the table, you must first get the TableCellFormat to apply new formatting to it. The following code loops through all tables to apply a visible border to all cells. ``` TXTextControl.tables.forEach(table => { table.cells.forEach(cell => { cell.getCellFormat(format => { format.leftBorder.setWidth(30); format.topBorder.setWidth(30); format.bottomBorder.setWidth(30); format.rightBorder.setWidth(30); }); }); }); ``` The border width is set to 30 Twips and the default color is black. ![Tables in TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/06/18/a/assets/tables2.webp "Tables in TX Text Control") ### Set Format to Current Cell To set the format of a single table cell, you can use the following code: ``` TXTextControl.tables.getItem(tableAtInputPos => { tableAtInputPos.cells.getItemAtInputPosition(cellAtInputPos => { cellAtInputPos.getCellFormat(format => { format.setBackColor("#ea1183"); }); }); }); ``` The code above sets the background color of the cell at the current input position to magenta. ![Tables in TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/06/18/a/assets/tables3.webp "Tables in TX Text Control") ### Conclusion This article showed how to create and format tables using the JavaScript API of TX Text Control. The API provides a wide range of functions to manipulate tables and cells in a document. The code snippets above can be used as a starting point to create more complex table structures. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Export Document Tables to CSV in .NET C#](https://www.textcontrol.com/blog/2026/06/19/export-document-tables-to-csv-in-dotnet-csharp/llms.txt) - [Convert CSV to PDF in .NET C#](https://www.textcontrol.com/blog/2026/01/19/convert-csv-to-pdf-in-dotnet-csharp/llms.txt) - [Why Table Control in Templates is Important for Professional PDF Creation in C#](https://www.textcontrol.com/blog/2025/04/04/why-table-control-in-templates-is-important-for-professional-pdf-creation/llms.txt) - [Splitting Tables at Bookmark Positions and Cloning Table Headers](https://www.textcontrol.com/blog/2025/02/13/splitting-tables-at-bookmark-positions-and-cloning-table-headers/llms.txt) - [Loading and Processing Excel XLSX Spreadsheet Tables into TX Text Control using .NET C#](https://www.textcontrol.com/blog/2024/10/16/loading-and-processing-excel-spreadsheet-tables-into-tx-text-control-using-net-csharp/llms.txt) - [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt) - [Text to Table and Table to Text in TX Text Control and C#](https://www.textcontrol.com/blog/2024/06/26/text-to-table-and-table-to-text-in-tx-text-control-and-csharp/llms.txt) - [Document Editor: Useful JavaScript Functions for Tables](https://www.textcontrol.com/blog/2024/06/19/document-editor-useful-javascript-functions-for-tables/llms.txt) - [Inserting MergeBlocks with the DataSourceManager and Applying Table Styles in C#](https://www.textcontrol.com/blog/2024/04/09/inserting-mergeblocks-with-the-datasourcemanager-and-applying-table-styles-in-csharp/llms.txt) - [How to Detect and Extract Table Data as JSON from PDF Documents in C#](https://www.textcontrol.com/blog/2023/08/15/how-to-detect-and-extract-table-data-as-json-from-pdf-documents-in-csharp/llms.txt) - [Useful Tricks for Working with Tables](https://www.textcontrol.com/blog/2023/08/04/useful-tricks-for-working-with-tables/llms.txt) - [Generating Hierarchical Tables from JSON Data in .NET C#](https://www.textcontrol.com/blog/2023/08/03/generating-hierarchical-tables-from-json-data-in-csharp/llms.txt) - [Table Extension: Remove Empty Columns After Mail Merge](https://www.textcontrol.com/blog/2023/06/08/table-extension-remove-empty-columns-after-mail-merge/llms.txt) - [Extension Method: Converting Tables to Tabs in C#](https://www.textcontrol.com/blog/2023/03/16/extension-method-converting-tables-to-tabs-in-csharp/llms.txt) - [Using Accounting Double Underlining in MailMerge Templates](https://www.textcontrol.com/blog/2023/03/02/use-accounting-double-underlining-in-mailmerge-templates/llms.txt) - [Importing Excel XLSX Spreadsheets into TX Text Control in ASP.NET Core and Windows Forms in C#](https://www.textcontrol.com/blog/2023/02/07/importing-excel-xlsx-spreadsheets-into-tx-text-control/llms.txt) - [Formatting Numbers in Table Cells](https://www.textcontrol.com/blog/2022/06/21/formatting-numbers-in-table-cells/llms.txt) - [Merging Merge Block Cells Vertically with Matching Content](https://www.textcontrol.com/blog/2021/10/20/vertically-merge-table-cells-of-merge-blocks-for-matching-content/llms.txt) - [Auto-Sizing Tables Proportionally](https://www.textcontrol.com/blog/2021/08/05/auto-sizing-tables-proportionally/llms.txt) - [Silicon Valley, Here We Come!](https://www.textcontrol.com/blog/2026/08/10/silicon-valley-here-we-come/llms.txt) - [Against the Trend: Why We Still Believe in Transparent, Perpetual Software Licensing. And Why You Should Too](https://www.textcontrol.com/blog/2026/08/06/against-the-trend-transparent-perpetual-software-licensing/llms.txt) - [Unlock the Full Value of Your TX Text Control License](https://www.textcontrol.com/blog/2026/08/06/unlock-the-full-value-of-your-tx-text-control-license/llms.txt) - [Introducing TX Text Control Web Collaboration Preview for ASP.NET Core](https://www.textcontrol.com/blog/2026/08/05/introducing-tx-text-control-web-collaboration-preview-for-asp-net-core-document-editors/llms.txt) - [Building Long-Term Trust with Digital Signatures and Timestamps in C# .NET](https://www.textcontrol.com/blog/2026/08/04/building-long-term-trust-with-digital-signatures-and-timestamps-in-c-sharp-dot-net/llms.txt) - [AI Natural Language Document Generation with MCP and TX Text Control .NET](https://www.textcontrol.com/blog/2026/07/16/ai-natural-language-document-generation-with-mcp-server-and-tx-text-control-dotnet/llms.txt)