|
HTML - Creating A Table With A Different Amount Of Cells In Each Row
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! Similar TutorialsI'm working with this web page code (below) and I'd like to seperate the two cells (or tables, I'm not sure). The one on the left holds the log-in and the links, and the one on the right contains the main text. I've attached an image and am showing the borders just to show you where the cells are. (I'm adding the lower half of the code to a reply, due to sixe limitations of this post). I'd like to seperate these two and run a vertical line between them. Can you help me with this? Code: <HTML>
<HEAD>
<Title></Title>
<style type="text/css">
body {margin: 1px 100px; 0px 100px;
padding: 1px;}
</style>
</HEAD>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0>
<TR valign=middle height=10>
<TD class=headera1><IMG src="/images/clear.gif" height=1 width=159 border=0></TD>
<TD width="100%" align=right class=headera2> </TD>
</TR>
<TR>
<TD class=headera3><IMG src="/images/clear.gif" height=1 width=159 border=0></TD>
<TD width="100%" align=right class=headera4> </TD>
</tr>
<TR valign=top>
<TD><!--<IMG src="/smusermanager/images/logo1.gif" height=150 width=159 border=0>--></TD>
<TD valign=left width=795 height=1><IMG src="/images/topimg.jpg"> <IMG src="/images/topimg.jpg"></font></TD>
</TR>
<TR valign=top height=1>
<TD colspan=2 class=black><IMG src="/images/clear.gif" height=1 width=100% border=0></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 valign=top cellPadding=0 height=100% width=100% border=0>
<TR valign=top>
<TD width=10%>
<TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/images/clear.gif" height=20 width=160 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD><IMG src="/images/clear.gif" height=2 width=160 border=0></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=1>
<TR>
<TD><font class=tbody>
<form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp">
<table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr>
<tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr>
<tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr>
</td></tr></table></td></tr></table></td></tr></table></form>
<div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"><a href="?action=login"> Home</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register"> Register</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphon.gif">--><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> FAQ</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Terms Of Use</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;">
<a href="?action=forgotusername"> Contact Us</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphon.gif" style="vertical-align: middle;"><a href="?action=forgotpass"> Forgot Password</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font></div>
</font>
</TD>
</TR>
</TABLE>
</TD>
<TD width="1" height=100% background="/smusermanager/images/dot.gif">
<TABLE cellSpacing=0 valign=top cellPadding=0 width=1 border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD>
</TR>
<TR valign=top height=3>
<TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=1 border=0></TD>
</TR>
</TABLE>
</TD>
<TD width=100%>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD>
</TR>
<TR valign=top height=3>
<TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=11 border=0></TD>
</TR>
<TR>
<TD valign=top><font class=tbody>
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 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>
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 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"> </td>
<td width="312" height="92" background="top12.jpg"> </td>
</tr>
<tr>
<td width="700" height="353" colspan="3" background="main.jpg"> </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"> </td> <td width="312" height="92" background="top12.jpg"> </td> I've tried messing around with colspan but i just can't get it working. Any idea whats wrong? 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! Can anyone tell me why? Not sure what is going on here... Here is a link to the development site where you can see the problem I am having (I did not design it, but I am in charge of changing to html). http://www.vismarkgroup.com/dev/Kyrie/about.html 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"> </div></td>
</tr>
<tr>
<td class="TabRight" height="100%"><div class="DivTabRight"> </div></td>
</tr>
<tr>
<td class="TabBottomLeft"><div class="DivTabBottomLeft"> </div></td>
<td class="TabBottom"><div class="DivTabBottom"> </div></td>
<td class="TabBottomRight"><div class="DivTabBottomRight"> </div></td>
</tr>
</table>
Thanks, -Steve 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? I am making a simple table with multiple links in each of the cells. The only problem is when I try to put 2 links in the same cell it turns out like this: Link Link, side by side. Is there a way to make them be a list (up and down) like this: Link Link Thanks in advance. Hello, I have a website that I'm having trouble with. The problem only shows up in Firefox. For some reason, a few cells in my tables are showing gaps between the borders and the JPG image within it. None of my tables or cells have any spacing or padding above 0. The cell heights aren't set to anything. Here's a screen shot for an example of what I mean: The gaps I'm referring to are where the red arrows are pointing. Now here's the same image with the borders of the tables within the problem region set to 1: Can anyone explain this? Is there are minimum cell height in Firefox or something? You can view my website at http://www.rrexecutivesuites.com (remember to view it in Firefox). 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 quick intro~ im an artist making a unique gallery. i did have someone else helping out n tried doing things in wordpress but that was getting to be too much trouble (especially after a promotion in their dayjob left me effectively alone with a site beyond my understanding). so i'm striking out to make it look as i want in plain ol' html first, and will tackle the database and backend stuff later. http://www.gaudiepod.org.uk/light/al.../test****.html ^ this example uses a few different techniques from my explorations of the possibilities. http://www.gaudiepod.org.uk/light/al...t****beta.html ^ this example is closer to what i am looking for (ignoring that it's all the same image for the moment). the images aren't merely cell-backgrounds, and so can be turned into clickable links without messy text (which was there just to give something that i could turn to links to lead to the fullscreen images), however all is not yet quite right.... ...when the window is large enough, the images in the grid show correctly, filling the screen. (hurrah!) but squish the window too small, and the cells refuse to shrink further than 100% the image's original size, and worse, the "fill table to 100% of window" breaks, and a scrollbar appears. i was wondering perhaps if i discovered the code to disable the scrollbar, that would force the table to remain constrained to the window's edge again. (would it?) but i'm guessing this cant be the whole solution, given the behavior of the table as is. what i'm going for, is a grid of 9 clickable images , that always scale to fit the window (or frame). (tho of course, the skills here will be scalable/transferable to tables any number of cells, not limited to just a 3x3 table of 9 cells) how can i make sure the table remains inside the window (no scrollbars!), and the images can scale down to smaller than original size? if i've messed up some other way (like left some link pointing to my local files or something), do please let me know. Hi I am facing an issue , the table border are overlapping , also its not aligned properly . i am attaching the HTML code , Anyone got the solutions to fix this issue would be a great help. Hi, I need to write text in different colors in the cells of a table... for now i use <FONT> but since it is deprecated how can i do this without FONT? HTML Code: <TABLE>
<TR>
<TD><FONT COLOR=BLUE>BLUE</FONT></TD>
<TD><FONT COLOR=RED>RED</FONT></TD>
<TR>
<TD><FONT COLOR=BLACK>BLACK</FONT></TD>
<TD><FONT COLOR=YELLOW>YELLOW</FONT></TD>
</TABLE>
Ok, so i uploaded my page to the web and for some reason the bullets are not showing up inside the table cells of the Toppings table to my page. for some reason it shows up fine in Chrome, but in IE and Firefox, they show up to the left of the table cells making it look weird? does someone know how to make it so it shows up the way it does in chrome for all browsers? whats wrong with my code? heres the page... http://valspizzaplace.com/newwebsite...inos/pizza.php ahh this is frustrating, i can't figure out and its probably something simple. I'm trying to create a table. And instead of trying to explain it I'll just upload the code in a Notepad file. I wrote TABLE HERE where i want the table. It will be much appreciated if someone could help me. |
|||||||