Made a 1 row, 2 column table, how to insert images?

Report · Jul 20, 2017

I am SO new to this, and i have no idea what i'm doing really, and i feel like ive burned through every youtube tutorial trying to figure this out.....

here is the code for the 1 row 2 column table:

<tbody>

<tr>

</tr>

</tbody>

</table>

I want it to look like the attached picture. Each is its own piece though, and i will attach picture to just show you that as well.
When i select the first table, i go to my tab and click insert>image
but obviously this has to be wrong.....
I am getting large white space all around the image.
Also, i cant seem to stack the social media icons on top of the larger block holding the number and website. they just keep appearing side by side.
Any help is appreciated. Thank you.

Report · Jul 20, 2017

Why are you using tables? Is this going to be a web site or an email?

YouTube is not the most reliable resource. Too often the tutorials are outdated or presenters are patently wrong. There is no peer review or quality control process on YouTube. Find tutorials on Lynda.com or Adobe TV where content is checked for accuracy.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 20, 2017

Because this is the process my manager had instructed me to do. So im doing it. But thanks...

Report · Jul 20, 2017

If you want to work with tables in dreamweaver this is the video to watch:

Creating a Responsive HTML Email

However, nobody designs websites in tables anymore. My art teacher, when he was teaching me dreaweaver ( back in 2009) also introduced me to dreamwever by working in tables. That was because that is all he knew. So because you learned it from the teacher it does not mean is the way to go.

If you are doing html email newsletter working with tables is the way to go. If however, you want to make website, You have to watch this video:

Dreamweaver CC Essential Training

Lynda.com is the only source of training i used. it has legit instructors that take your skills as far as you want to take them. It is worth every dime if you want to do this for a living and know what you are doing.

Report · Jul 20, 2017

Take out the table's width, or change it to the total of the widths of the images in pixels.

100% means the table will be 100% of the width of its parent element (or the viewport) so when you're adding an image, the table is still 100% width, even if the image isn't.

In the right side cell, place a second table, 2 rows and 1 column then drop your social media icons into the top one and the phone number into the bottom one. Something like...

<tr>

<td>Big image here</td>

<tr>

<td>social images here</td>

</tr>

<tr>

<td>phone number image here</td>

</tr>

</table></td>

</tr>

</table>

For the width="??????" make sure the table width is enough to fit all of the images horizontally. If you set the width to something lower than that number, the social icons will stack.

Report · Jul 20, 2017

sorry i suck so bad at this!!!!!! But why is there now a space between the social icons and phone number...?

Report · Jul 20, 2017

That is being caused by your doctype declaration.

Whenever you use a strict doctype, or the html doctype, there is "text descender padding" added to the bottom of inline images.

Fixing it is pretty simple, but it sort of depends on what the page is going to be used for as to which fix is best. Is this going online, or is it an html email?

For an actual web page, add the following between your <head> section's <style> tags, or into your external .css file...

table img {

vertical-align:bottom;

}

...or you could go into File > Page Properties > Title/Encoding and change Document Type to XHTML 1.0 Transitional and hit Apply.

If it's an html email, add the following attribute/value to each of your <img> tags...

style="vertical-align:bottom;"

Report · Jul 20, 2017

Yes, that worked. It is an email btw... Thank you so so so much for the help. Seriously you saved me from going insane.

Report · Jul 20, 2017

Just wait until you're missing an apostrophe in a block of 1000 lines of javascript

Report · Jul 20, 2017

Tables are not used in web design for many reasons. Mainly because they are not responsive to fit all devices. CSS layouts are better for that.

If this is for an HTML Email, try this. I had to make assumptions about image sizes. So adjust yours as required.

<!doctype html>

<head>

<title>Document Title</title>

</head>

<body>

<tr>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 20, 2017

This may help out as some kind of template for your header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<tr>

<tr>

SCHOOL TRANSPORTATION<br />

NEWS EXPO<br />

JULY 2017<br />

STNEXPO LOGO</td>

</tr>

</table>

</td>

</table>

<tr>

</tr>

<tr>

<td style="font-family: helvetica, arial, sans-serif; font-size: 15px; background-color: #000; color: #ffffff; text-align: center; padding: 3px 0 15px 0;">ari-hetra.com</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Made a 1 row, 2 column table, how to insert images?

1 Correct answer