This is my table and I want to put the second table beside the first table but when I tried it nothing happen and also how can I make my table in the same width as the second table I tried to add width, but the table cannot sync together
enter image description here
and this is my code
<table border="1" bordercolor="#336699" align="center">
<!-- TABLE -->
<tr>
<td><b>LAST NAME:<b></td>
<td><input type="text" name="lname"></td>
</tr>
<tr>
<td><b>FIRST NAME:</b></td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td><b>MIDDLE NAME:<b></td>
<td><input type="text" name="mname"></td>
</tr>
<tr>
<td><b>COURSE:</b></td>
<td>
<select name="course">
<option value="BSCS">BSCS</option>
<option value="BSIT">BSIT</option>
<option value="BSCE">BSCE</option>
<option value="BSEMC">BSEMC</option>
</select>
</tr>
</div>
</div>
<!-- TABLE 2 -->
<table border="1" bordercolor="#336699" align="center">
<tr>
<td><b>SEX:</b></td>
<td>
<select name="gender">
<option value="FEMALE">FEMALE</option>
<option value="MALE">MALE</option>
</select>
<tr>
<td><b>AGE:<b></td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td><b>CONTACT NUMBER:<b></td>
<td><input type="text" name="cp"></td>
</tr>
</tr>
<tr>
<td><label for="birthday"><b>BIRTHDAY:</b></label>
</td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td><b>FATHER NAME:<b></td>
<td><input type="text" name="ffname"></td>
</tr>
<tr>
<td><b>MOTHER NAME:<b></td>
<td><input type="text" name="mmname"></td>
</tr>
<tr>
<td><b>GUARDIAN NAME:<b></td>
<td><input type="text" name="mmname"></td>
</tr>
<tr>
<td><b>ADDRESS:<b></td>
<td><textarea name="w3review" rows="3" cols="15">
</textarea>
</td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" value="Save">
<input type="reset" value="clear"></center>
</td>
</tr>
You had a wrong HTML structure.
To put them the way you wanted you need to wrap the two tables with a div. I call it a container. And set a CSS rule "display: flex"
.container {
display: flex
}
<div class="container">
<table border="1" bordercolor="#336699" align="center">
<tr>
<td><b>LAST NAME:</b></td>
<td><input type="text" name="lname" /></td>
</tr>
<tr>
<td><b>FIRST NAME:</b></td>
<td><input type="text" name="fname" /></td>
</tr>
<tr>
<td><b>MIDDLE NAME:</b></td>
<td><input type="text" name="mname" /></td>
</tr>
<tr>
<td><b>COURSE:</b></td>
<td>
<select name="course">
<option value="BSCS">BSCS</option>
<option value="BSIT">BSIT</option>
<option value="BSCE">BSCE</option>
<option value="BSEMC">BSEMC</option>
</select>
</td>
</tr>
</table>
<!-- TABLE 2 -->
<table bordercolor="#336699" align="center">
<tr>
<td><b>SEX:</b></td>
<td>
<select name="gender">
<option value="FEMALE">FEMALE</option>
<option value="MALE">MALE</option>
</select>
</td>
</tr>
<tr>
<td><b>AGE:</b></td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td><b>CONTACT NUMBER:</b></td>
<td><input type="text" name="cp" /></td>
</tr>
<tr>
<td>
<label for="birthday"><b>BIRTHDAY:</b></label>
</td>
<td><input type="date" name="birthday" /></td>
</tr>
<tr>
<td><b>FATHER NAME:</b></td>
<td><input type="text" name="ffname" /></td>
</tr>
<tr>
<td><b>MOTHER NAME:</b></td>
<td><input type="text" name="mmname" /></td>
</tr>
<tr>
<td><b>GUARDIAN NAME:</b></td>
<td><input type="text" name="mmname" /></td>
</tr>
<tr>
<td><b>ADDRESS:</b></td>
<td><textarea name="w3review" rows="3" cols="15"> </textarea></td>
</tr>
<tr>
<td colspan="2">
<center><input type="submit" value="Save" /> <input type="reset" value="clear" /></center>
</td>
</tr>
</table>
</div>
Hi I am just going through a mysterious condition in my code.
single <td> Or <th> in chrome and Mozilla Firefox don't know why.
<div class="right_content">
<table style="width: 100%; height: 200px; margin-top: 5px;" id="mainTable">
<tr>
<th colspan="1">Participant Name</th>
<td colspan="1">${fullName}<td>
<th colspan="1">Role</th>
<td colspan="1">${role}<td>
<th colspan="1">Brand/Location</th>
<td colspan="1">${location}<td>
</tr>
<tr>
<th>Goal Text</th>
<td><input name="goalText" id="goalText" name="goalText"
class="text_field" size="40" maxlength="95" tabindex="1"
title="Minimum Rating For This Competency" /></td>
<th>Assessment Center</th>
<td><select name="assessmentCenterId" id="assessmentCenterId" class="text_field"
tabindex="2" title="Select Assessment Center">
<option value="-1">--Select Assessment Center--</option>
<c:forEach items="${acList}" var="singleAC" varStatus="sts">
<c:choose>
<c:when test="${singleAC.id eq 0}">
<option value="${singleAC.id}" selected="selected">${singleAC.name} </option>
</c:when>
<c:otherwise>
<option value="${singleAC.id}">${singleAC.name}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select></td>
<th>Status</th>
<td><select name="status" id="status" class="text_field"
tabindex="3" title="Select Status Of IDP">
<option value="-1" selected="selected">--Select Status--</option>
<c:forEach items="${EnumIDPStatus}" var="singleStatus"
varStatus="sts">
<c:choose>
<c:when test="${(singleStatus.key eq 0) &&(mode eq 'Add')}">
<option value="${singleStatus.key}" selected="selected">${singleStatus.value}</option>
</c:when>
<c:otherwise>
<option value="${singleStatus.key}">${singleStatus.value}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select></td>
</tr>
<tr>
<th>Score</th>
<td><input type="text" name="score" id="score" class="text_field"
size="40" maxlength="95" tabindex="4" title="Score" /></td>
<th>Target Date</th>
<td><input type="text" name="targetDate" id="targetDate"
class="text_field" title="Minimum Rating For This Competency" /></td>
<th>Extended Date</th>
<td><input type="text" name="extendedDate" id="extendedDate"
class="text_field" /></td>
</tr>
<tr>
<th>Manger Comments</th>
<td><textarea name="managerComments" id="managerComments"
class="text_field" rows="5" cols="50" tabindex="7"
title="Minimum Rating For This Competency"></textarea></td>
<th>Assessor Comments</th>
<td><textarea name="assessorComments" id="assessorComments"
class="text_field" rows="5" cols="50" tabindex="8"
title="Minimum Rating For This Competency"></textarea></td>
<th>Participant Comments</th>
<td><textarea name="participantComments"
id="participantComments" class="text_field" rows="5" cols="50"
tabindex="9" title="Minimum Rating For This Competency"></textarea>
</td>
</tr>
<tr>
<td colspan="6" class="frm_footer_buttons"
style="text-align: center;"><input type="button"
name="btnsubmit" id="btnsubmit" class="frm_button"
value="<spring:message code='button.save' />" tabindex="10"
onclick="return errorPopup();" /> <input type="reset"
class="frm_button" value="Reset" tabindex="11" /> <input
type="button" class="frm_button"
value="<spring:message code='button.cancel'/>" tabindex="12"
onclick="submitRequest('showIDPList.html');" /></td>
</tr>
</table>
</div>
Make sure to always close your HTML tags properly.
Here's a part of your HTML:
<tr>
<th colspan="1">Participant Name</th>
<td colspan="1">${fullName}<td>
<th colspan="1">Role</th>
<td colspan="1">${role}<td>
<th colspan="1">Brand/Location</th>
<td colspan="1">${location}<td>
</tr>
Can you spot a problem?
Look carefully at your closing tags. Your <th> opening tags have proper </th> closing tags, but you <td> don't. They miss / in their closing tags which effectively means you open a new tag instead of closing the previous one.
I want to add this calculator to my website html. What code should I write to my html? Can I do it without the extra javascript and css? Thanks in advance
There are few ways to do it but these are the two best options:
Use iframe - you don't need much extra javascript code, but you'll have to fiddle with the css and positioning as the calculator is in the middle of an empty page. As LearningPhase said, use <iframe src="http://www.superskinnyme.com/bf.html"></iframe> + styles.
Copy and paste HTML block (table) that includes the calculator, and copy the javascript code as well. You can access them through "View page source":
Javascript:
<script type="text/javascript" src="http://www.superskinnyme.com/js/fatcalc.js"></script>.
Table:
<table width="480px" border="0" cellspacing="0" cellpadding="0" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg" align="left">
<tbody><tr>
<td align="left"><form>
<table width="490" align="left" border="0" cellpadding="5" cellspacing="2" bgcolor="#F8FDFF" class="wp" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg">
<tbody><tr>
<td align="right" class="style4">Gender </td>
<td><label for="s1">
<input type="radio" id="s1" name="s" value="m" onclick="sex(this.form)">
<span class="wp"> Male</span></label>
<span class="wp">
<label for="s2"> </label>
</span>
<label for="s2">
<input type="radio" id="s2" name="s" value="f" onclick="sex(this.form)">
<span class="wp">Female</span></label></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Preferred measurement </strong></td>
<td><label for="d1">
<input type="radio" id="d1" name="d" value="1">
<span class="wp">Centimetres</span></label>
<label for="d2">
<input type="radio" id="d2" name="d" value="2.54">
<span class="wp">Inches</span></label>
<span class="wp">
<label for="d2"></label>
<label for="d2"> </label>
</span>
<label for="d2"></label></td>
</tr>
<tr>
<td><div align="right" class="wp"><strong>Height </strong></div></td>
<td><input type="text" id="h" name="h" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Neck </strong></td>
<td><input type="text" id="n" name="n" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right"><strong class="wp">Waist</strong> </td>
<td><input type="text" id="w" name="w" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Hips</strong> </td>
<td><input type="text" id="r" name="r" size="6" disabled="disabled" class="calcbox"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Calculate" onclick="calc(this.form);return false;" name="button2" class="calcbutton" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996;vertical-align:middle">
<input type="reset" value="Reset" onclick="clearForm(this.form)" class="calcbuttons" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996; vertical-align:middle"></td>
</tr>
<tr>
<td height="19" colspan="2" align="center" class="bigbold"> </td>
</tr>
<tr>
<td height="19" colspan="2" bgcolor="#DDDDDD" id="mus"><div align="center"><span class="smallw">RESULT</span></div></td>
</tr>
<tr>
<td align="right"><strong>BODY FAT </strong></td>
<td><input type="text" id="f" name="f" size="6" readonly="readonly" class="calcboxa"></td>
</tr>
</tbody></table>
</form></td>
</tr>
</tbody></table>
This works fine in Firefox and Chrome, but not in IE:
CSS
.tablehead th{
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF; background-color:#000058;
font-size: 13px; font-family:calibri!important;
font-weight: 700;
}
.tab_head th.tab_space {
padding-left: 5px;
}
.redtab_head th {
/* Mozilla: */
background: -moz-linear-gradient(top, #C80000, #9F0101);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#C80000), to(#9F0101));
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
}
#pls-play { cursor:pointer; }
/*.tb1hide {
table-layout:fixed!important;
}
*/
.box {
text-overflow:clip!important;
overflow:hidden!important;
white-space:nowrap!important; table-layout:fixed!important;
-o-text-overflow: clip!important;
}
*html .box {
width: expression( document.body.clientWidth > 124 ? "124px" : "auto" ); /* sets max-width for IE */
}
HTML
<table width="94%" cellpadding="2" cellspacing="1" class="tablehead" id="pls-batting">
<thead>
<tr class="tab_head" align="right" >
<th width="44" align="center"><span style="text-transform:lowercase;">q te</span>.R </th>
<th width="212" align="left" class="tab_space">tester</th>
<th width="54" align="center">tes</th>
<th width="34" align="center"> tes</th>
<th width="34" align="center" >tes</th>
<th width="34" align="center">te</th>
<th width="34" align="center">tes</th>
<th width="44" align="center">tes</span>.L</th>
<th width="34" align="center"> tes</th>
<th width="34" align="center" >tes</th>
<th width="34" align="center">tes</th>
<th width="34" align="center">tes</th>
</tr>
</thead>
<tbody>
<tr>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsr_select" class="psvsr_sel_class" id="psvsr_select111904" style="width:40px;" >
<option value=""> </option>
<option>codeup</option>
<option>codeup</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="left" class="box tb1hide" style="max-width: 124px;">dfjbdsjbfhjb bdshfbdshbfhb jasbdfhbasdhjb
<input type="hidden" name="psb_playerId" value="/111904/" /></td>
<td width="54" align="left" valign="top" >OF</td>
<td align="center" valign="top" ><span style="display:none;" id="r_hr1_hid">3</span>
<input name="r_hr1" type="text" class="txt_fid" id="r_hr1" onBlur="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" maxlength="1" value="3" onfocus="return selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_bnt1_hid">3</span>
<input name="r_bnt1" type="text" class="txt_fid" id="r_bnt1" onBlur="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_ph1_hid">3</span>
<input name="r_ph1" type="text" class="txt_fid" id="r_ph1" onBlur="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_run1_hid">3</span>
<input name="r_run1" type="text" class="txt_fid" id="r_run1" onBlur="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsl_select" class="psvsl_sel_class" id="psvsl_select111904" style="width:40px;" >
<option value=""></option>
<option value="lineup" >Lineup</option>
<option value="bench" >Bench</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="center" valign="top" ><span style="display:none;" id="l_hr1_hid">3</span>
<input name="l_hr1" type="text" class="txt_fid" id="l_hr1" onBlur="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_bnt1_hid">3</span>
<input name="l_bnt1" type="text" class="txt_fid" id="l_bnt1" onBlur="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_ph1_hid">3</span>
<input name="l_ph1" type="text" class="txt_fid" id="l_ph1" onBlur="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_run1_hid">3</span>
<input name="l_run1" type="text" class="txt_fid" id="l_run1" onBlur="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
</tr>
<tr>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsr_select" class="psvsr_sel_class" id="psvsr_select111904" style="width:40px;" >
<option value=""> </option>
<option>codeup</option>
<option>codeup</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="left" class="box tb1hide" style="max-width: 124px;">dfjbdsjbfhjb bdshfbdshbfhb jasbdfhbasdhjb
<input type="hidden" name="psb_playerId" value="/111904/" /></td>
<td width="54" align="left" valign="top" >OF</td>
<td align="center" valign="top" ><span style="display:none;" id="r_hr1_hid">3</span>
<input name="r_hr1" type="text" class="txt_fid" id="r_hr1" onBlur="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" maxlength="1" value="3" onfocus="return selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_bnt1_hid">3</span>
<input name="r_bnt1" type="text" class="txt_fid" id="r_bnt1" onBlur="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_ph1_hid">3</span>
<input name="r_ph1" type="text" class="txt_fid" id="r_ph1" onBlur="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_run1_hid">3</span>
<input name="r_run1" type="text" class="txt_fid" id="r_run1" onBlur="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsl_select" class="psvsl_sel_class" id="psvsl_select111904" style="width:40px;" >
<option value=""></option>
<option value="lineup" >Lineup</option>
<option value="bench" >Bench</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="center" valign="top" ><span style="display:none;" id="l_hr1_hid">3</span>
<input name="l_hr1" type="text" class="txt_fid" id="l_hr1" onBlur="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_bnt1_hid">3</span>
<input name="l_bnt1" type="text" class="txt_fid" id="l_bnt1" onBlur="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_ph1_hid">3</span>
<input name="l_ph1" type="text" class="txt_fid" id="l_ph1" onBlur="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_run1_hid">3</span>
<input name="l_run1" type="text" class="txt_fid" id="l_run1" onBlur="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
</tr>
</tbody>
</table>
I was able to get it working with the following:
table{
table-layout: fixed;
}
How about stripping this down a bit to see if the issue is with the property in IE or something else. Does the following work?
HTML:
<table class="tablehead" id="pls-batting">
<thead>
<tr class="tab_head" id="pls-play">
<th># vs.R</th><th class="tab_space">PLAYER</th>
</tr>
</thead>
<tbody>
<tr class="oddrow player-10-5544" id="111904">
<td>11</td>
<td class="box tb1hide" style="max-width: 124px;">Cameron, Mike (FLA)fdgdsgfdtertwet dgfs aesfaesrf</td>
</tr>
</tbody>
</table>
CSS:
.tablehead th{
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF; background-color:#000058;
font-size: 13px; font-family:calibri!important;
font-weight: 700;
}
.tab_head th.tab_space {
padding-left: 5px;
}
.box {
text-overflow:clip!important;
overflow:hidden!important;
white-space:nowrap!important; table-layout:fixed!important;
-o-text-overflow: clip!important;
}
*html .box {
width: expression( document.body.clientWidth > 124 ? "124px" : "auto" ); /* sets max-width for IE */
}
It's hard to determine in it's built-out state what's relevant and what isn't, with the inline styles, onmousehovers, etc. One of these could be at fault, but best to start with the stuff that is supposed to be working to make sure it is.
My guess is that the expression isn't working, but that's just a guess.