How to make a table cell the exact size of the image contained within it

[DigitalChickster]

Hi all! I used Dreamweaver a LONG time ago. Then I used Muse. And I've been procrastinating for YEARS about re-learning Dreamweaver. But I'm doing it. I'm trying to recreate something I created in Dreamweaver, then Muse. And I can't get it to work right. Basically, I have an image. I've broken it in to 8 pieces... so that some of the pieces are rollovers. But they are all part of one big image. I broke the image up in Photohop, making sure all images on one row are the same height and add up to the grand total. Same with the columns and their widths. I imported each piece in to a table in Dreamweaver... but they just wont' line up! A few of the table cells are wider than the image inside the cell. How do I force the cell to be the correct width so they all line up? 

I'm sure there's a better way to do what I'm trying to do, but since I have all the images and I used to be able to make it work this way, I'm just going with it. Any advice you can give me would be greatly appreciated. Thank you! 

[Nancy OShea]

Here's the thing.  What you're planning is a really bad idea for a boat load of reasons.

1. Image slices rank at the bottom of best web practices with the Titanic.  Nobody uses them anymore.

2. Your approach to web design is not mobile-friendly.  Users won't have a good experience on your site.

3. Since 2006, nobody uses outdated tables for layouts. CSS replaced them.

Start over with one of the pre-built Bootstrap Templates in Dreameaver CC.

1. Defiine your local site folder.  Site > New Site...

2. Go to File > New > Starter Templates > Bootstrap Templates.  Choose a layout and hit CREATE button. See screenshots.

Save As index.html (your home page).

Dreamweaver will create a responsive (mobile-friendly) starter site for you.

Replace starter text and images with your own text & images. 

Don't use image slices. Use whole images that can rescale to fit on smaller devices. 

REFERENCE TUTORIALS:
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/bootstrap/

Hope that helps. Post back if you have any questions.

Good luck with your project.

[DigitalChickster]

Thanks for the response! Yes, I realize I am behind the times. Honestly, no one goes to my web page, as far as I know. But I have an outdated address on there I wanted to change it... and since Muse doesn't work anymore, I can't change it the way it is. So I'm trying to teach myself enough to rebuild my existing site... but CSS terrifies me. I gave up web design just about the time it became popular... for many reasons, including the fact that I now had to design for all sorts of devices. And I just didn't enjoy it any more. LOL I will attempt to do what you've suggested, but I have my doubts about my abilities. But I appreciate your help! 

[BenPleysier]

Have a look at this and drop Dreamweaver for VSCode.

https://www.youtube.com/playlist?list=PL4cUxeGkcC9joIM91nLzd_qaH_AimmdAR

[Nancy OShea]

CSS terrifies me. I gave up web design [when] I had to design for all sorts of devices.

By @DigitalChickster

============

No worries.  Bootstrap's CSS is already built for you.  No complicated & tedious coding required. Bootstrap sites work on all devices -- small, big and everything in between.  That's why it's the #1 site building framework used by millions of websites. It will cut your site creation time in half so you can focus on content instead of architecture.

The other alternative is to use an all-in-one online site builder like Squarespace, Webflow, Wix or WordPress.  Their ease of use is appealing if you're willing to pay more for web hosting.

[osgood_]

A table cell should automatically wrap to the size of the image which is in it if l remember correctly, assuming no width or height is added to the cell/table itself. You may also need to use some css to make the images in the cell align to the bottom of the cell without leaving a space.

img {

display: block;

}

Having said that this kind of structure was something used many years ago and probably serves no benefit when building modern web application today, there's almost certainly better options available.

[BenPleysier]

Talking CSS, have a look at

https://www.w3.org/TR/css-nesting-1/

Similar to pre-processors. Works a treat.