HTML - Text Float Between Cells

Hi,

I have been challenged with creating the HTML for a news article list which is going on a website.

I have started out by creating a test list using <ul><li> tags

This is what the list looks like

http://design2rent.co.uk/menu_test/index.html

The data for this list will be grabbed from a database but the designer would like to have the date aligned to the right instead of at the end of the article, i have uploaded an image here for what the end result should look like.



ignoring the backgroudn images ect as this is just a snippent of the design is it possible to have 1 list item split into 2 cells and align one of them to the left and the other to the right to acheive the end result layout?

I've racked my brains with divs and tables but can't seem to find a solution and tried many google searches but not found any relevent topics.

any help would be hugely appreciated

Hi:

I have a long table (613 rows) with two columns (Containing Names, Addresses, Lot Numbers, and Phone Numbers, etc.

I would like to format the cells of each column so that certtain fields (e.g., Phone Number is in a certain position in each cell). For example, I'd like this phone number to be right-aligned in the second row of each cell, etc

Is there a standard, or easy way to do this ??

Thank for any help offered.

-Mel Smith

Hello,

I made a goofy little website at adamvonwillis.com and if you look at the home page you will see a gap between the first and second rows. The rows need to be touching. If anyone could look at the code and help me out I would be very greatful! Thank you!

For some reason i can't resize the weight on the cells i highlighted in black on the code below

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="700" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="388" height="92" background="top11.jpg">&nbsp;</td>
        <td width="312" height="92" background="top12.jpg">&nbsp;</td>
      </tr>
      <tr>
        <td width="700" height="353" colspan="3" background="main.jpg">&nbsp;</td>
      </tr>
      <tr>
        <td width="269" height="149"><a href="ImagensFinaisSite/picsleft/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('LeftPic','','ImagensFinaisSite/picsleft/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsleft/2_off.jpg" alt="Clicar na imagem para ampliar" name="LeftPic" width="269" height="149" border="0" id="LeftPic"></a></td>
        <td width="157" height="149"><a href="ImagensFinaisSite/picscenter/1.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('CenterPic','','ImagensFinaisSite/picscenter/1_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picscenter/1_off.jpg" alt="Clicar na imagem para ampliar" name="CenterPic" width="157" height="149" border="0" id="CenterPic"></a></td>
        <td width="274" height="149"><a href="ImagensFinaisSite/picsright/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RightPic','','ImagensFinaisSite/picsright/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsright/2_off.jpg" alt="Clicar na imagem para ampliar" name="RightPic" width="274" height="149" border="0" id="RightPic"></a></td>
      </tr>
    </table></td>
  </tr>
  <tr>

  </tr>
</table>

These are the cells i can't resize:
<td width="388" height="92" background="top11.jpg">&nbsp;</td>
<td width="312" height="92" background="top12.jpg">&nbsp;</td>


I've tried messing around with colspan but i just can't get it working. Any idea whats wrong?

Hi, I'm new to HTML, i pretty much learned it by myself with online tutorials. Now i'm having problems with this web layout, There are empty spaces between cells and I can't remove them no matter what I do. I used cellpadding="0" and cellspacing="0" and style="border-collapse: collapse" but it made no difference. This is only happening on FireFox. On Internet Explorer it appears fine. I'm sure that I'm doing some stupid mistake somewhere. Here's the code of the whole page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Using CSS</title>
<style>
body { margin:0; }
</style>
</head>
<body topmargin="0" leftmargin="0" bottommargin="0">

<table cellpadding="0" border="1" style="border-collapse: collapse" cellspacing="0" height = "100%">
<tr>
<td><img src="images/Gray-Cut-(layout)_01.gif" height="64"></td>
<td><img src="images/Gray-Cut-(layout)_02.gif" height="64"></td>

</tr>

<tr>
<TD class="example" width="786" colSpan="2" heigh="100%">
<TABLE id="Table2" height="100%" cellSpacing="0" cellPadding="0" border="1" style="border-collapse: collapse">
<TR>
<TD><IMG height="21" alt="" src="images\Gray-Cut-(layout)_03.gif" width="182"></TD>
<TD width="100%" rowSpan="5"><iframe name="iframe" src="home.html" height = "100%" width="100%" frameborder="0"></iframe></TD>
</TR>
<TR>
<TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_05.gif" width="182"></TD>
</TR>
<TR>
<TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_06.gif"
width="182"></TD>
</TR>
<TR>
<TD><IMG height="35" alt="" src="images\Gray-Cut-(layout)_07.gif"
width="182"></TD>
</TR>
<TR>
<TD height="100%">&nbsp</TD>
</TR>
</TABLE>
</TD>
</tr>
</table>
</body>
</html>

Hi, here's my code, and things are working as they should. My only problem is I can't seem to move my drop-down list from the cell it is in to the cell left one. (see photo) Can anyone see from my code whats going wrong?



Site url: http://www.walthamforest-fc.co.uk/st...layer.php?id=3

Code:

<TABLE
  WIDTH="520"
  ALIGN=center
  BORDER=0
  CELLSPACING=0
  CELLPADDING=0>
<TR VALIGN=middle  ALIGN=center>
 <td><img src="http://www.walthamforest-fc.co.uk/stats/images/playerbar.jpg"></TD>
</TR>
<tr VALIGN=left  ALIGN=center>
<td><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . "_1.jpg";
?>"/><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . ".jpg";
?>"/>
</td></tr>
<tr>
<td background="/stats/images/playernameback.jpg" width="308" height="46">  <font face="Arial" size="4"><span style="letter-spacing: 0pt"><font color="#018609">
<?php echo "$playerdata[firstname]" ?> <?php echo "$playerdata[lastname]" ?>
</TD>
<td>
<td background="/stats/images/playernameback.jpg" width="202" height="46"><?php

//
//Haetaan kaikki pelaajat dropdownia varten
//
$sql = '
SELECT P.PlayerID AS id,
P.PlayerLastName AS lastname,
P.PlayerFirstName AS firstname,
P.PlayerPublish AS publish
FROM tplss_seasons S
LEFT OUTER JOIN tplss_players P ON P.PlayerID = S.SeasonPlayerID
';

if($defaultseasonid == 0)
{
   $sql .= "
      WHERE P.PlayerID != '' AND
      P.PlayerPublish = '1'
   GROUP BY id
ORDER BY firstname, lastname";
}
else
{
   $sql .= " AND S.SeasonID = '$defaultseasonid'
   WHERE P.PlayerID != '' AND
   P.PlayerPublish = '1'
   GROUP BY id
ORDER BY firstname, lastname";
}


$query = mysql_query("$sql", $connection)
or die(mysql_error());

echo"<select name=\"playerid\">";

while($data = mysql_fetch_array($query))
{
   if($data['id'] == $id)
   {
      echo"<option value=\"$data[id]\" SELECTED>$data[firstname] $data[lastname]</option>\n";
   }
   else
   {
      echo"<option value=\"$data[id]\">$data[firstname] $data[lastname]</option>\n";
   }
}

echo"</select>  <input type=\"submit\" name=\"change_player\" value=\"$txt_change\">";
mysql_free_result($query);


$ttl = (($_SESSION['getAdditional'] + 1) % 2) ? "Show": "Hide";
?>
</td>
</tr>

how to manage cells height, e.g. have control over them in HTML, say I want a height to be 2px.
site http://members.dodo.com.au/~rouslan/...ite/index.html
td height and tr height codes didn't work,
table or cells keep stretching themselves up or down

Hi,

I am developing a calendar application in ASP. The calendar is displayed in a table where each cell represents a date and has a + and - in it. The + represents people working on that date and the - those who are off.
I need to add 'title' information to table cells so that when the user moves the cursor over the + or - the respective information to be shown.
I tried to do this as follows:

<td><title = "worklist">+</title><title="freelist">-</td>

This doesn't work, nothing appears when the cursor hovers over either the + or -.

I can combine the worklist and freelist and display it in one go with:

<td title="listall">+=</title>

but this is unsatisfactory. Too much data is displayed and the result looks messy.
I dont want to double the amount of cells by having + and - in seperate cells either.
Is there a trick that allows seperate <title> info in the same cell.

Help would be appreciated,
regards, Guy

When you have a table, and there is a lot of text in cells and you dont want the ENTIRE table stretch, what code can you add to the cell in order to give it scrollbars?
The only way I found online is by css, but I'm not sure where to add the code.

Any tips/help?

Hello everyone! I'm so glad an informative forum like this exists! I'm in Web-115 and was looking for a little help on an assignment as i'm not sure how to do this.

Below are the things i'm struggling with and below it is the code. Any help would be greatly appreciated!


9. "Assign the cell in the top-left corner of the table the id name topLeft. Assign the cell in the top-right corner the id name topRight." Not sure where to insert this into my morning.htm file

13. "add the following styles for the table cells" (not sure where to insert "topLeft, topRight, etc or what to use as id to be indentified in CSS"


HTML Code:

<table class="programs"
summary="Lists the morning programs aired by KPAF from 5:00 a.m. to 12:00 p.m. (central time)">

<caption>All times central</caption>



<thead>
<colgroup>
<col class="timeColumn" />
<col class="daysColumn" span="6" />
<col class="lastColumn" />
</colgroup>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>


Thanks so much!

Justin Moose

Hello! This is my first post on the forum, seems like a nice place here. I'm pretty much brand new to HTML and CSS as well. I'm learning fast but I have run into a problem that I cannot solve... and maybe it is not even solve-able with HTML.

I want to create a table that has a different amount of cells on each row, but I want those rows to have the same width. I understand it is hard to understand from my poor description. So check out the image below:


This is how I want to table to look, how is it done? Thanks!

Hi,

I spent five and a half hours attempting to resolve this problem, but now I'm hoping that someone might be able to help me.

If you visit http://www.justforyouwebsite.com/, you'll see that the menu tables on the left and right sidebars are meant to have shadows. The shadows are created by using 3x3 tables, with the right and bottom sides of the tables containing repeating background images.

Unfortunately, however, the size of the table cells on the right isn't correct. The top-right cell should be 7 pixels high, with the middle right cell filling the space between the top right and bottom right cells. As it is now, the top right cell and the middle right cell appear to be split evenly, and no matter what style or HTML changes I make, there is no way to get the shadow to repeat all the way up the right side of the table.

Does anyone have any ideas? The Smarty template code is below in case it might help someone, although I don't see how this could be a scripting problem.

Code:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td colspan="2" rowspan="2">

<table cellspacing="1" width="100%" class="VertMenuBorder">
<tr>
<td class="VertMenuTitle">
<table cellspacing="0" cellpadding="0" width="100%"><tr>
<td>{$link_begin}<img src="{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}" class="VertMenuTitleIcon" alt="{$menu_title|escape}" />{$link_end}</td>
<td width="100%">{if $link_href}<a href="{$link_href}">{/if}<font class="VertMenuTitle">{$menu_title}</font>{if $link_href}</a>{/if}</td>
</tr></table>
</td>
</tr>
<tr> 
<td class="VertMenuBox">
<table cellpadding="{$cellpadding|default:"5"}" cellspacing="0" width="100%">
<tr><td>{$menu_content}<br /></td></tr>
</table>
</td></tr>
</table>

</td>
<td class="TabTopRight" height="7px"><div class="DivTabTopRight" height="7px">&nbsp;</div></td>
</tr>

<tr>
<td class="TabRight" height="100%"><div class="DivTabRight">&nbsp;</div></td>
</tr>
<tr>
<td class="TabBottomLeft"><div class="DivTabBottomLeft">&nbsp;</div></td>
<td class="TabBottom"><div class="DivTabBottom">&nbsp;</div></td>
<td class="TabBottomRight"><div class="DivTabBottomRight">&nbsp;</div></td>
</tr>
</table>

Thanks,

-Steve

Does anyone know the CSS or HTML (or combo) script to be able to have a table row collapse when there is no text in one cell, but there is text in the next cell? I have a 2-column table with titles in the left column and want the right column to be populated by a user. If the user doesn't populate the right cell(s) or row, I'd like that row -including the constant/visible text that is in the left col- to be hidden and that row to collapse or move up...

Hello,

Is it possible to create drop down menus from table cells (i.e., moving mouse over a cell activates a drop down menu)? If so, could you possibly point me to an example to see how it is done?

Thanks!

Hi there,

I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells.

This is how I'm currently doing it:

Code:

<div id="container">
<ul>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><h2>List Header</h2></td>
</tr>
<tr>
<td height="29"><li><a href="itemone.html">Item One</a></li></td>
</tr>
<tr>
<td height="29"><li><a href="itemtwo.html">Item Two</a></li></td>
</tr>
<tr>
<td height="29"><li><a href="itemthree.html">Item Three</a></li></td>
</tr>
<tr>
</table>
</ul>
</div>

Notice that the H2 header isn't actually a list item but is still within the <ul> tags. Is any of this confusing or incorrect for google indexing?