I'm at beginner level CSS but a friend started a CSS in HTML4 or 5? So I have a steep learning curve. And I'm a bit lost.

I have personal websites written in HTML that I'm converting to CSS. e.g. I don't require perfection, just something easy that works.

I have hundreds of pages with single row, 2 cell tables... and 4 to 6 of these single tables per page. The left holds a newspaper clipping; the right holds the transcribed text. The images vary in `length` and `width`; the images are organized by surname (so I cannot group them by image sizes). In between the single HTML tables, I have a centered asterick \* to separate the tables. It's simple, looks clean and orderly.

I'm looking for a very basic and easy to understand write up for table to add to the CSS file that will keep the left (image) cell a set `width`, so every vertical line of the tables 'lines up' regardless of the image size or whether the image fills the cell or not.

What would be best here? A `.table` that I reuse on the same page, so it's similar to what I have now in HTML?

Or a new `#tablename` and use `colspan` on every other table row for the \* symbol?

If I take one of the `#tablenumber` that I already have, do I just change the name, like use `#news` then list the details for `td`/`tr` etc? Could someone give an example please?

Could someone give an example of how to write a `.table` for a CSS file to show me how to set it up that way?