I want to design a form which consists of a table that has a text-box and a drop-down list. When I add the drop-down list, the form gets distorted. I have these problems:
1) list is so wide. I need to make its width fits the widest text.
2) Also the height of the cells somehow increased.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
<tr>
<td><input type="text" id="text-field"></td>
<td><select name="D1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select> </td>
<td><input type="button" class="add" id="submit-button" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
NOTE: There is a third column not shown in the image. It contains a button as shown in the code.
The problem seems to be in the header of your table. You have 2 columns in the first row and 3 columns in the second row.
To keep symmetry use the following standardized code:
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="text-field">
</td>
<td>
<select name="D1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
<td>
<input type="button" class="add" id="submit-button" value="Add Row">
</td>
</tr>
</tbody>
What I have done is, I added standard and of HTML table, and added 3rd column in the header Action. You can rename it according to your need.
You will have to check your CSS as well. It might effect the form you have created!
Related
I have a table in my application like below. Intially one row will be visible, when user clicks on Add row, a new row will be added. Now, I want the first cell of the first row alone to be disabled/hidden. It should be enabled from second row, when user clicks on Add row. Can someone help me on this. Thanks in advance!
<table border="0" width="100%" class="center table table-bordered striped">
<tbody>
<tr><td colspan="10"><center><strong>Table</strong></center></td></tr>
<tr style="text-align:center; font-weight:bold;" class="dues-table">
<td>ID</td>
<td>Name</td>
<td>Address</td>
</tr>
<tr data-ng-repeat=" ">
<td>
<select data-ng-options=" "data-ng-model=" "data-ng-change="">
<option value="">Select</option>
</select>
</td>
<td>
<select data-ng-options=" "data-ng-model=" "data-ng-change="">
<option value="">Select</option>
</select>
</td>
<td>
<select data-ng-options=" "data-ng-model=" "data-ng-change="">
<option value="">Select</option>
</select>
</td>
<tr>
<td colspan="10"><button class="btn btn-info btn-xs"data-ng-click="addrow()">Add row</button>
<button class="btn btn-info btn-xs"data-ng-click="save()">Save</button>
</td>
</tr>
</tbody>
</table>
I made a simple html file. but while running this on browser and view source code on browser it shows different DOM structure, table get nested in labels. Why the DOM structure is different than the original source code.
<html>
<head>
<title>Student Details</title>
<head>
<body style="font-family:sans-serif;">
<center>
<div id='add_student'>
<form>
<lable for="tot" >Name:</label>
<input type='text' id='tot'>
<lable for='sex'>Sex:</label>
<select id="sex">
<option value=''>Select</option>
<option value='Male'>Male</option>
<option value='Female'>Female</option>
</select>
<lable for='section'>Section:</label>
<input type="radio" name="section" id='section' value="A">A
<input type="radio" name="section" id='section' value="B">B
<input type="button" id="add_button" value="Add">
</form>
<hr>
<table style="text-align: center;">
<th>
<td width='120px' text-align='center'>Name</td>
<td width='120px' text-align='center'>Sex</td>
<td width='120px' text-align='center'>Section</td>
<td width='120px' text-align='center'>Click</td>
</th>
</table>
<div id='list_div'>
</div>
</div>
<script src="jquery-1.8.2.min.js"></script>
<script src="underscore-1.4.2.min.js"></script>
<script src="backbone.js"></script>
<script type="text/template" id='list_template'>
<tr>
<td width='120px' text-align='center' ><%= name %></td>
<td width='120px' text-align='center'><%= sex %></td>
<td width='120px' text-align='center'><%= section %></td>
<td width='120px'><button id='del_but' value='Delete'>Click</button></td>
</tr>
</script>
<script src="script.js"></script>
</center>
<script></script>
</body>
Your HTML is invalid (e.g. <lable for="tot" > is misspelt so elements are nested inside it because you don't have an end tag that actually matches it, and you have a <th> wrapping <td> elements instead of a <thead> wrapping <th> elements).
Write valid HTML. Test it using a validator.
You HTML is completely off. In the first table, you have <td>s in a <th>.
The right structure for a table is:
<table>
<tr>
<th>header</th>
<td>data</td>
<td>data</td>
(more tds...)
</tr>
(more trs...)
</table>
I have a table with 3 rows.
I decided to split each row into 4 columns even though the most TDs a row will have is two.
So, the top row with one TD, has a colspan of 4.
the next row has two TDs, the first with a colspan of 1, the second with a colspan of 3.
the third row has two TDs, each with a colspan of 2.
here is the HTML:
<table class="img">
<tbody>
<tr>
<td colspan="4" class="ttBtn"><hr></td>
</tr>
<tr>
<td colspan='1'>
<select id="moveShifts">
<option val="1">1st Shift</option>
<option val="2">2nd Shift</option>
<option selected="" val="3">3rd Shift</option>
</select>
</td>
<td colspan='3' style='display:block' dept="3">
<select id="moveDepts">
<option val="139">CO-MAIL 1</option>
<option val="140">CO-MAIL 2</option>
<option val="599">FORKLIFT</option>
<option val="665">LEAD TEMP</option>
<option selected="" val="666">OPERATOR</option>
<option val="16">PAMS-CTLMAIL</option>
<option val="463">PAMS-CTLMAIL GEN LAB ** DO NOT USE **</option>
<option val="141">PAMS-CTLPAL</option>
<option val="540">POLY BAG</option>
<option val="485">RECEIVING</option>
</select>
</td>
</tr>
<tr>
<td colspan='2'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
</td>
<td colspan='2'>
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
</tbody>
</table>
It looks like the second button on the bottom row won't shift left any closer the the right end of the select element above it.
Can anyone tell me what I need to do to fix this?
Here is a link to the code on JSFiddle - http://jsfiddle.net/Joth/TdVAd/2/
Thanks!
Try this below code...
<tr>
<td colspan='4'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
The main problem is 'display:block;' in TD element (if you add border to table, you show it):
<td colspan="3" style='display:table-cell' dept="3">
You can use tag COLGROUP and set width at tag COL, for example:
<table class="img">
<colgroup><col width="25%" /><col width="25%" /><col width="25%" /><col width="25%" /></colgroup>
live demo: http://jsfiddle.net/Magicianred/T9Ru5/4/
Enjoy your code
i've the below HTML page containing 2 2 tables in 1 main table.
<%--
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
--%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="722">
<tr>
<td width="334">
<table width="255" >
<tr>
<td width="128"><p>PARTS Updated
</p></td>
<td width="111"><label for="PARTS_Updated"></label>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select></td>
</tr>
<tr>
<td><p>TSI OK
</p></td>
<td><label for="TSI_OK"></label>
<select name="TSI_OK" id="TSI_OK">
<option value="N/A">N/A</option>
<option value="TSI Query">TSI Query</option>
</select></td>
</tr>
<tr>
<td><p>Special Ins OK
</p></td>
<td><label for="Special_Ins_OK"></label>
<select name="Special_Ins_OK" id="Special_Ins_OK">
<option value="N/A">N/A</option>
<option value="SI Query">SI Query</option>
</select></td>
</tr>
</table></td>
<td width="376"><table width="279" align="center" height="44">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
</form>
<h1> </h1>
</body>
</html>
when i'm commenting out the below part
<%--
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
--%>
i am getting the table as i wanted, but when i uncomment it the row space is changing, i.e. it is increasing. please let me know how to make the row space reduced and comment the above mentioned part.
Thanks
Check this Code:
<%-- Part 1 (Replace % with ! for HTML comment)
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
-->
<!DOCTYPE html>
<%-- Part 2 (Replace % with ! for HTML comment)
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="722" border=1>
<tr>
<td width="334">
<table width="255" border=1>
<tr>
<td width="128"><p>PARTS Updated
</p></td>
<td width="111"><label for="PARTS_Updated"></label>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select></td>
</tr>
<tr>
<td><p>TSI OK
</p></td>
<td><label for="TSI_OK"></label>
<select name="TSI_OK" id="TSI_OK">
<option value="N/A">N/A</option>
<option value="TSI Query">TSI Query</option>
</select></td>
</tr>
<tr>
<td><p>Special Ins OK
</p></td>
<td><label for="Special_Ins_OK"></label>
<select name="Special_Ins_OK" id="Special_Ins_OK">
<option value="N/A">N/A</option>
<option value="SI Query">SI Query</option>
</select></td>
</tr>
</table></td>
<td width="376"><table width="279" align="center" height="44" border=1>
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
</form>
<h1> </h1>
</body>
</html>
Case 1: If you commenting "Part1" and "Part2". Then:
Case 2: If you uncommenting "Part1" and commenting "Part2". Then:
Case 3: If you commenting "Part1" and uncommenting "Part2". Then:
Because the "DOCTYPE html" declaration is an instruction to the web browser about what version of HTML the page is written in.
In Case2 the first line is not this "DOCTYPE html" so web-browser not able to know the version on html, so it will not able to format the rest tag.
In Case3 the first line is this "DOCTYPE html" so web-browser able to know the version on html, so it will able to format the rest tag. So we are getting the formatted table.
I'm trying to display two tables inside a container div and it works perfectly in Firefox, and does exactly what I am expecting, but in IE it shifts my second table to appear outside my div. Anyone got any ideas what the issue is that I am running into here? If I put either table in by itself there is no problem, but when I add the second table, regardless of which one come first, I get the problem.
Code for tables:
<div id="contentContainer" style="border: 1px solid black;">
<table id="filterPostingsTable" align="Left" border="0" style="width:100%;">
<tr>
<th>Status</th>
<th>PositionTitle</th>
<th>Classification</th>
<th>Location</th>
<th>Filter</th>
</tr>
<tr>
<td align="center">
<select name="filterStatus" id="filterStatus">
<option selected="selected" value="">Select Status</option>
<option value="Active">Active</option>
<option value="Interviewing">Interviewing</option>
<option value="New">New</option>
</select>
</td>
<td align="center">
<input name="filterPositionTitle" type="text" id="filterPositionTitle" />
</td>
<td align="center">
<select name="922e5a87-18fd-467f-9e7b-f4210fbd93ea" id="922e5a87-18fd-467f-9e7b-f4210fbd93ea">
<option value="0">Select One...</option>
<option value="9c2e6df7-e319-478c-b137-47eff4e4748d">Administrative</option>
<option value="78ce598b-6dad-4434-9bb5-24429c630943">Certified</option>
<option value="c75f18a4-e503-428c-8e23-83d1dac21997">Classified</option>
<option value="77232a27-2c58-4192-bbbf-1b0b493da564">Other</option>
</select>
</td>
<td align="center">
<select name="filterLocation" id="filterLocation">
<option value="Select Location">Select Location</option>
<option value="77c68429-e878-4778-b467-0d684308b188">Desert Foothills</option>
<option value="d226f2a3-02c4-40c5-b784-949c22647081">District Office</option>
</select>
</td>
<td align="center">
<input type="submit" name="filterJobs" value="Filter Postings" id="filterJobs" />
</td>
</tr>
</table>
<table id="jobPostingsTable" class="tablesorter" align="Left" border="0" style="width:100%;float: left">
<thead>
<tr>
<th></th>
<th>Status</th>
<th>Position Title</th>
<th>Classification</th>
<th>Working Location</th>
</tr>
</thead>
<tbody>
<tr id="2a62a993-fc3a-4a43-96b6-fd663a724b6e">
<td>
<input id="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" type="checkbox" name="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" />
</td>
<td>New</td>
<td valign="middle">
<span>Systems Analyst</span>
<img src="images/pdf.png" style="border-width:0px;" />
</td>
<td>Classified</td>
<td>District Office</td>
</tr>
</tbody>
</table>
</div>
Applicable CSS is as follows:
#contentContainer {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:auto;
margin:0;
width:1000px;
}
All tables are set to width of 100%. The buttons in the image don't really matter as they don't seem to affect the table problem whether they are there or not. Usually this sort of thing works just fine, but in IE 7 it is now rendering as follows:
If you want to float your tables, they will need a width in pixels, not percent.