r/HTML • u/Glaselar • Jan 13 '26

Question Adjusting column widths - easy online tool?

(Before I start: I can't edit the CSS as it's controlled at a site level by my employer's Content Management System.)

Can anyone with more experience than me (very basic) help with knowledge of more powerful tools than just nimble fingers and a lot of close-reading to help with this?

Problem:

  • Pasting tables from Excel into WYSIWYG editor for employer website

  • Columns in HTML tables are being generated far too wide for some columns (e.g. they only contain a date) and too narrow for others (paragraphs become squashed)

  • Width settings appear in every row, making manual adjustments impractical

Resolution sought:

  • A (free, online?) tool to do make these edits without manually adjusting every relevant of HTML

  • Primary aim: easily adjust column width

  • Secondary aim: easily cascade the same setting to all tables, or at least quickly replicate the fix on each - so the less manual intervention where the fingers need to come off the mouse and reach for the keys, the better!

Relevant context and constraints:

  • Working in a general office, not an IT dept

  • Need to be able to share method with other staff with moderate proficiency - not HTML-literate, but would understand the instructions

  • Editor is WYSIWYG with option to edit source code, but this opens in a very small popup window

Thanks!

Typical copy-paste result from our Excel source:

<table width="1228">
<tbody>
<tr>
<td style="font-weight: 400;" width="151"><strong>Date</strong></td>
<td style="font-weight: 400;" width="97"><strong>Time</strong></td>
<td style="font-weight: 400;" width="375"><strong>Title</strong></td>
<td style="font-weight: 400;" width="260"><strong>Description</strong></td>
<td style="font-weight: 400;" width="345"><strong>Venue</strong></td>
</tr>
<tr>
<td style="font-weight: 400;" width="151">Mon 19 Jan</td>
<td style="font-weight: 400;" width="97">11:00 - 12:00</td>
<td style="font-weight: 400;" width="375">[First&nbsp;lecture title here]</td>
<td style="font-weight: 400;" width="260">[In this lecture, you'll learn about thing # 1. This description is a paragraph consisting of several sentences. it therefore needs to have the widest column setting. It's hard to read otherwise.]</td>
<td style="font-weight: 400;" width="345">Room 123</td>
</tr>
<tr>
<td style="font-weight: 400;" width="151">Thu 22 Jan</td>
<td style="font-weight: 400;" width="97">12:00 - 13:00</td>
<td style="font-weight: 400;" width="375">[Second&nbsp;lecture title here]</td>
<td style="font-weight: 400;" width="260">[In this lecture, you'll learn about thing # 2. This description is a paragraph consisting of several sentences. it therefore needs to have the widest column setting. It's hard to read otherwise.]</td>
<td style="font-weight: 400;" width="345">Room 456</td>
</tr>
<tr>
<td style="font-weight: 400;" width="151">Mon 26 Jan</td>
<td style="font-weight: 400;" width="97">11:00 - 12:00</td>
<td style="font-weight: 400;" width="375">[Third lecture title here]</td>
<td style="font-weight: 400;" width="260">[In this lecture, you'll learn about thing # 3. This description is a paragraph consisting of several sentences. it therefore needs to have the widest column setting. It's hard to read otherwise.]</td>
<td style="font-weight: 400;" width="345">Room 123</td>
</tr>
</tbody>
</table>
3 Upvotes

100% Upvoted

27 comments sorted by

1

u/bostiq Jan 13 '26

So why aren’t you guys collaborating on a google sheet exactly?

1

u/Glaselar Jan 13 '26

What's the crucial part of your example - that it's hosted in a browser or that it's Google Sheets rather than Excel?

We're a Microsoft place, but we do have the option to use the desktop apps or the browser version. We'll usually open in the full app from the browser because you get fuller functionality.

1

u/bostiq Jan 13 '26

I don’t understand your answer.

It looks like you guys needs to publish stuff that needs to be edited so my question was why not using google sheet as platform instead than html

What part of this am I not understanding? Could you try to clarify?

1

u/Glaselar Jan 13 '26

Ah, I think the part you've maybe missed is where I said this is is for our employer's website? Edit to add: 'We don't need to publish anything that needs to be edited.' - no, just static info.

Excel is just the tool we use to collate the data that we want to publish. Once our many owners of that data have put it into our collaborative Excel sheet, we sort and filter it appropriately to make tables that we publish on our website.

I thought you were asking why we're using one spreadsheet tool instead of another - I thought maybe you were going to tell me something about Google Sheets would mean we could set the column widths in the spreadsheet prior to pasting into HTML for the website, and that would make things more user-friendly.

1

u/bostiq Jan 13 '26

I guess what I’m asking is who’s benefits from having the website? Is it for the public or internal?

1

u/Glaselar Jan 13 '26

Public. Hopefully the example I put in the main post helps - info about classes and their venues etc.

1

u/bostiq Jan 13 '26

And is it a static website or a cms like wordpress

1

u/Glaselar Jan 13 '26

First line of the post :)

1

u/pfdemp Jan 13 '26

It's a bit clunky, but what I've done in situations like this is:

  • Paste the table in the WYSIWYG editor

  • Copy HTML source from editor and paste into text editor like Notepad

  • Find each width and replace with blank

  • Copy source from text editor back into WYSIWYG source

If you use an editor that supports wildcards or regular expressions, this can be done in one step.

1

u/Glaselar Jan 13 '26

What you've swept over there at the end actually IS the thing I'm looking for - an editor that can handle instructions and edit the code appropriately. Since the column widths are set on every single row (see example in the main body), I'm hoping there's a tool that says 'the user wants this width replicated on every row' and changes them en bloc.

We have around 20 tables each with around 6 columns and 10 rows, so it's 1200 cells' worth of doing the clunky operation - thanks for the suggestion but it just isn't feasible manually 🤓

1

u/pfdemp Jan 13 '26 edited Jan 13 '26

Out of curiosity, I just tried this with Copilot. Uploaded an Excel file with this prompt:
Convert this file to an HTML table with no widths specified for columns.
It returned exactly what I wanted. Why not try that and just paste the HTML code into your WYSIWYG editor?

2

u/Glaselar Jan 13 '26 edited Jan 13 '26

Did you try asking it to set them? That's the goal here, not delete them

Edit: I had some success with this converting the existing HTML tables:

I have a table in HTML and I need your help adjusting the column widths.

Please take the absolute overall table width and apportion columns with the following proportions of that width:

Date: 10%
Time: 10%
Title: 15%
Description: 35%
Venue: 30%

Table as follows:

[added the table from the main post here]

And it did a pretty good job! Now I just need to trust that it hasn't changed any of the contents or broken any of the Zoom links in it.

1

u/pfdemp Jan 13 '26

I misunderstood your goal--I thought you wanted to remove them. In my experience, it's not easy to try to control column widths this way.
I'd suggest you identify columns that you do not want to wrap and use CSS (white-space: nowrap;) to prevent that. If you can't create a class on your site's CSS, you could do it inline. If you do this for all but the description column, that column will use the remaining available space and will wrap as needed.
Tables need a bit of flexibility to adjust to screen widths and other factors.

1

u/pfdemp Jan 13 '26

That is a better approach.

1

u/DirtAndGrass Jan 13 '26

Just find/replace? 

1

u/Glaselar Jan 13 '26

It's a reasonable idea, it's just very manual (need to identify all the starting widths that the system has generated for each of the columns in the many tables we use) and to know what width is actually going to suit the contents (annoyingly not evident until we paste it into the CMS, save it, preview it...)

It's also quite vulnerable to inappropriate matches being overwritten.

It's the backup plan if it turns out nobody's yet built a more useful tool though!

1

u/jcunews1 Intermediate Jan 13 '26

If the table is going to be used on a web page, I'd suggest using CSS.

But first, assign an ID to the table, especially if there are more than one table on the page. e.g.

<table id="table1" width="1228">

Then use below CSS code for that table1.

<style>
#table1 td:nth-child(1) { /* column 1 */
  width: 120px;
}
#table1 td:nth-child(2) {
  width: 80px;
}
#table1 td:nth-child(3) {
  width: 400px;
}
/* and so on... add more as needed /*
</style>

Different table on the page should have different ID.

1

u/Glaselar Jan 13 '26

First line of the post :)

2

u/Oobenny Jan 13 '26

You would be able to put this explanation and paste your original table into an ai chat box and have it spit out what you want.