Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

html table

Posted on 2013-06-25
12
Medium Priority
?
377 Views
Last Modified: 2013-06-26
so i'm a novice at html and need to create a table that has 3 columns and 1 row (in order to display information on a webpage that has different information sitting next to each other, from left to right).

the CMS site i'm using to create the webpage is www.portfoliobox.net so i have to use a table to accomplish this (no fancy CSS, etc). code that i need help with and how it's appearing is attached. that's not how i want it to look.

what i am trying to achieve is this: all the CONTENTS of the table needs to be aligned top left. but at the moment, the text and images are all aligning all over the place (center, etc).

i've searched on the net on how to use valign tags, etc and it's confusing and nothing is working.

please help!
Screen-Shot-2013-06-26-at-10.30..png
Screen-Shot-2013-06-26-at-10.30..png
0
Comment
Question by:ss80ss
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
12 Comments
 

Author Comment

by:ss80ss
ID: 39276680
TRIED THIS AND DIDN'T WORK:

<table border="1" cellpadding="1" cellspacing="1" style="width: 900px; text-align:left; vertical-align:top">
      <tbody>
            <tr>
                  <td>
0
 
LVL 12

Expert Comment

by:duttcom
ID: 39276685
Valign is used in the <td> tag like so - <td valign="top">

You should not need to specify left alignment as that is the default.

You can use CSS (in a non-fancy way) in your table by specifying it in the HTML tags like so - <td style="vertical-align:top;">
0
 
LVL 12

Expert Comment

by:duttcom
ID: 39276697
I am guessing your column widths are not what you are expecting because you have only specified the width of the whole table; You would think that the text would cause the image column to to shrink to fit the width of the image, but html tables don't render that way.

You can still specify the width of the table, but to control the width of the columns, you can do so by adding to the <td> tag -

Column 1 <td> might be <td width="150px">
Column 2 <td> might be <td width="200px">
Column 3 <td> SHOULD BE <td width="*"> so that the third colum is whatever width is required to make the table the required 900px wide.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Expert Comment

by:ScorchD
ID: 39276701
Can you post a link to the page, there is probably CSS being applied to the contents that we cannot see from the screenshot.
0
 

Author Comment

by:ss80ss
ID: 39276705
here is a link to the page:

http://sumi.portfoliobox.me/about
0
 

Author Comment

by:ss80ss
ID: 39276710
i added the following and it's still not working:

<td align="LEFT" valign="TOP">
Screen-Shot-2013-06-26-at-11.01..png
0
 

Author Comment

by:ss80ss
ID: 39276711
here is the code:

<table border="1" cellpadding="1" cellspacing="1" style="width: 900px;">
      <tbody>
            <tr>
                  <td align="LEFT" valign="TOP">
                        <img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/73148/file/7314813164Ag8b.png" style="width: 150px; height: 165px;" /></td>
                  <td align="LEFT" valign="TOP">
                        <p style="text-align: left;">
                              nice to meet you. i&#39;m sumi &mdash;<br />
                              design enthusiast. management ninja. idea entrepreneur. music fiend.<br />
                              avid linguist. faux wine pro. grammar nazi. star gazer. amateur<br />
                              gastronomist. positive realist. secret optimist.<br />
                              design inspirations deiter rams, tim brown, shepard fairey, lotta<br />
                              jansdotter, barbara kruger, richard seymour, milton glaser, richard<br />
                              branson, banksy, zuzana licko... among others</p>
                        <p style="text-align: left;">
                              things that make me tick good humor, typography, wanderlust, color,<br />
                              unconventional combinations, activism, thunderstorms, music, children,<br />
                              minimalism, innovation, vocabulary, sunsets, flaws, wisdom, positivity,<br />
                              dissonance, t.e.d. talks, collaboration, documentaries</p>
                  </td>
                  <td align="LEFT" valign="TOP">
                        Experience<br />
                        brand analysis, development, management<br />
                        ideation // copywriting<br />
                        team leadership<br />
                        user-centered design<br />
                        information architecture<br />
                        wireframing<br />
                        prototyping<br />
                        industry research // trend hunting &amp; reporting<br />
                        relationship management<br />
                        internal + client process analysis<br />
                        Inspired by<br />
                        business model design<br />
                        user experience<br />
                        service design<br />
                        experience design<br />
                        cross-discipline collaboration</td>
            </tr>
      </tbody>
</table>
<p>
      &nbsp;</p>
0
 

Author Comment

by:ss80ss
ID: 39276713
can someone write the correct code for me? i'm so confused!!
0
 

Author Comment

by:ss80ss
ID: 39276715
if you copy and paste the code i've provided into a text editor and write in the correct code, that would be amazing!! :)

i've increased the point value for the question too because of this extra work :) thank you, amazing coding people!! :)
0
 
LVL 12

Accepted Solution

by:
duttcom earned 2000 total points
ID: 39276726
Try this -

<table border="1" cellpadding="1" cellspacing="1" style="width: 900px;">
      <tbody>
            <tr>
                  <td style="vertical-align:top;">
                        <img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/73148/file/7314813164Ag8b.png" style="width: 150px; height: 165px;" /></td>
                  <td style="vertical-align:top;">
                        <p style="text-align: left;">
                              nice to meet you. i&#39;m sumi &mdash;<br />
                              design enthusiast. management ninja. idea entrepreneur. music fiend.<br />
                              avid linguist. faux wine pro. grammar nazi. star gazer. amateur<br />
                              gastronomist. positive realist. secret optimist.<br />
                              design inspirations deiter rams, tim brown, shepard fairey, lotta<br />
                              jansdotter, barbara kruger, richard seymour, milton glaser, richard<br />
                              branson, banksy, zuzana licko... among others</p>
                        <p style="text-align: left;">
                              things that make me tick good humor, typography, wanderlust, color,<br />
                              unconventional combinations, activism, thunderstorms, music, children,<br />
                              minimalism, innovation, vocabulary, sunsets, flaws, wisdom, positivity,<br />
                              dissonance, t.e.d. talks, collaboration, documentaries</p>
                  </td>
                  <td style="vertical-align:top;">
                        Experience<br />
                        brand analysis, development, management<br />
                        ideation // copywriting<br />
                        team leadership<br />
                        user-centered design<br />
                        information architecture<br />
                        wireframing<br />
                        prototyping<br />
                        industry research // trend hunting &amp; reporting<br />
                        relationship management<br />
                        internal + client process analysis<br />
                        Inspired by<br />
                        business model design<br />
                        user experience<br />
                        service design<br />
                        experience design<br />
                        cross-discipline collaboration</td>
            </tr>
      </tbody>
</table>
<p>
      &nbsp;</p> 

Open in new window

0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39277273
Assuming you can edit your HTML and add some basic CSS, you need to do the following: Add an ID to your table, something like:

<table id="myTable" border="1" cellpadding="1" cellspacing="1" style="width:900px;">

Open in new window

and then style it with the following CSS:

#myTable td { vertical-align:top; }

Open in new window

Job done!
0
 

Author Closing Comment

by:ss80ss
ID: 39277399
Duttcomm, this worked!! Thank you thank you thank you - also for doing the extra work for me. You're a lifesaver.

Thanks to everyone else for your comments and smarts too!! You guys are great here!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question