Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You'll want to get a basic understanding of how HTML tables work. <code>&lt;tr&gt;</code> means "Table Row", or a <em>horizontal</em> alignment of cells in the table.</p> <p>So, in order to get the text to the right of the image, you need to put them in the same row. <em>However</em>, it looks like you want <em>two</em> rows (first line and second line) to both be in the same row as the image. You do this by setting <code>rowspan</code> on the first <code>&lt;td&gt;</code> (for the image) to <code>2</code>, placing the <strong>first line</strong> in the same <code>&lt;tr&gt;</code> as the image, and then the <strong>second line</strong> in a new <code>&lt;tr&gt;</code>.</p> <pre><code> &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td width="30%" class="bottom_bdr stocklistItemImage" rowspan="2&gt; &lt;img height="75" width="100" class="stocklist_thumb" border="2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" alt=""&gt; &lt;/td&gt; &lt;td width="70%" class="vfeatures bdrBottom"&gt; &lt;span style="font-weight:bold"&gt;FIRST LINE:&lt;/span&gt; Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;!--No first cell here; it's already covered by the image td with the rowspan="2" --&gt; &lt;td width="70%" class="bottom_bdr a_top stocklistItemDescription"&gt; &lt;span style="font-weight:bold"&gt;SECOND LINE&lt;/span&gt; Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>I've updated your fiddle here: <a href="http://jsfiddle.net/CjAMc/1/" rel="nofollow">http://jsfiddle.net/CjAMc/1/</a> (I also had to remove the last, blank <code>&lt;td&gt;</code> with the width of 70%.)</p> <p>Further, the table layout in your fiddle is a mess, and you're going to run into more problems there. I highly recommend you learn how tables work and start from scratch on this project.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload