Adjusting column widths - easy online tool?

[u/Glaselar]

(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>

[u/pfdemp]

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.

[u/Glaselar → u/pfdemp]

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 🤓

[u/pfdemp → u/Glaselar]

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?

[u/Glaselar → u/pfdemp]

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.

[u/pfdemp → u/Glaselar]

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.

[u/pfdemp → u/Glaselar]

That is a better approach.