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.
Related
Three files are given. The third one shows you what your finished web page should look like. The two others should be included in the main file created by you. Your web page should accommodate the following:
..Don't allow the same color chosen for both the text color and cell color. Show an alert message if so chosen.
..Add an option for the font size to change among 3, 5, and 7.
<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body bgcolor="#EFEFEF">
<form name="StyleForm">
<table align="center">
<tr>
<td align="center" height="40" valign="top">
<b>STYLES</b>
</td>
</tr>
<tr>
<td>
<p>
<font size="2">Text Color:</font><br>
<select name="TextColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<font size="2">Cell Color:</font><br>
<select name="CellColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<input type="button" value="Apply Style">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body>
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE VIEWER</b></font>
</td>
</tr>
<tr>
<td align="center" height="100" width="400" style="background-color:white">
<div style="color:black">
<font size="5">Hello World Wide Web!</font>
<div>
</td>
</tr>
</table>
</body>
</html>
Here's my code, it just not applying the style
<html>
<head>
<title>HTML and JavaScript</title>
<script>
function apply_style();
{
var TextColor = LeftFrame.document.StyleForm.TextColor.value;
var CellColor = LeftFrame.document.StyleForm.CellColor.value;
var TextElement = RightFrame.document.getElementById("MessageText");
textElement.style.color = textColor;
cellElement.style.backgroundColor = cellColor; return;
}
</script>
</head>
<frameset cols="30%,*">
<frame src="left1.html">
<frame src="right1.html">
</frameset>
</html>
First, to use getElementById you actually need to have an element with the id you want. Second, you should call your function otherwise it will not do anything. Third you missed getting your cell element.
Here's a code and try to study it:
function apply_style() {
var textColor = document.getElementById('TextColor').value;
var cellColor = document.getElementById('CellColor').value;
var textElement = document.getElementById("MessageText");
var cellElement = document.getElementById("cell");
textElement.style.color = textColor;
cellElement.style.backgroundColor = cellColor;
}
<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body bgcolor="#EFEFEF">
<form name="StyleForm">
<table align="center">
<tr>
<td align="center" height="40" valign="top">
<b>STYLES</b>
</td>
</tr>
<tr>
<td>
<p>
<font size="2">Text Color:</font><br>
<select id="TextColor" name="TextColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<font size="2">Cell Color:</font><br>
<select id="CellColor" name="CellColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<input type="button" id="button" onclick="apply_style()"value="Apply Style">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body>
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE VIEWER</b></font>
</td>
</tr>
<tr>
<td id="cell" align="center" height="100" width="400" style="background-color:white">
<div style="color:black">
<font id="MessageText" size="5">Hello World Wide Web!</font>
<div>
</td>
</tr>
</table>
</body>
</html>
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!
In this table, when I check the radio button (present) on the 1st row and when I go and check again the present on the 2nd row, the first row present in getting unchecked automatically. And all the radiobutton gets checked. This is just a sample for two students.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<%# page import="java.sql.*"%>
<table bgcolor="lightgray" border="5" width="60%" cellpadding="5" cellspacing="0.5" color="blue" >
<tr>
<th colspan ="3" bgcolor="#999999"><br>
<div align="Center" > <font face="verdana" size="5" color="white"> ATTENDANCE </font>
</div>
</th>
</tr>
<tr>
<td width="14%"><h3>Register No</td>
<td><h3> Student Name</td>
<td><h3> Attendance</td>
</tr>
<tr>
<td> 1 </td>
<td> <input type="radio" >Present <input type="radio">Absent
<tr>
<td>2</td>
<td> <input type="radio" >Present <input type="radio">Absent
</tr>
<%
Connection dbcon=null;
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
dbcon=DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:orcl","scott","tiger");
Statement stmt=dbcon.createStatement();
ResultSet rst=null;
rst=stmt.executeQuery("select * from studenttables");
while(rst.next())
{%>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=1%></td>
<td><%=rst.getString("name")%></td>
<td><input type="radio" >Present <input type="radio">Absent
</tr>
<% } %>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
Set a name and make a group of radio buttons like
() - name="rdg1" and id="Present"
() - name="rdg1" and id="Absent"
and
() - name="rdg2" and id="Present2"
() - name="rdg2" and id="Absent2"
if the rdg1 - Present is checked and you click to check the rdg1 - Absent the check box 1 will clear, same to second group.
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 two row, there are some things in 1st row that decide the row's width;
On the second row I have couple of groups of elements which intended to contain two elements side by side.
I want to make even spaces between these groups of elements in 2nd row. They should stretch all over the cell and take all it's width.
Could you advice, what would I do?
The code goes like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<tr>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
</tr>
<tr>
<td colspan="5" align="justify">
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group2 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group3 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group4 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
</tr>
</table>
</body>
</html>
EDIT: So far I did this, and almost got it. But the spaces between first and last groups are not even. Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
table.ball {empty-cells: show}
table.ball td {text-align:center;border:1px solid blue;}
table.ball td:nth-last-of-type(1) {text-align:right; }
table.ball td:nth-of-type(1) {text-align:left;}
select.sorter {width:180px}
</style>
</head>
<body>
<table >
<tr>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
</tr>
<tr>
<td colspan="5" align="middle" >
<table class="ball" width="100%" >
<colgroup>
</colgroup>
<tr>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Maybe this example is close to what you need. I eliminated some of your hard coded info and put it into css.
table {table-layout: fixed; border-collapse: collapse;}
td {width: 200px; border: 1px solid black;}
.sorter, .dir {width: 11.5%;}
td[colspan="5"] {text-align: center;}
11.5% width seemed to work well, even though mathematically it seemed that it should be closer to 12.5%, but the select elements were doing some funky stuff with having extra space to their right. However, the text-align: center keeps them evenly spaced nice.
Check the markup, I have added divs with class="group" for each of the group in the second row. Instead of adding tables inside table, you can add divs like this .
<tr>
<td colspan="5" align="justify">
<!-- group1 -->
<div class="group">
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
<div class="group">
<!-- group2 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
<div class="group">
<!-- group3 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
<div class="group">
<!-- group4 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
</td>
</tr>
And in the css :
.group{
width:25%;
}
Here is the updated code - Here is the fiddle http://jsfiddle.net/n2zEv/embedded/result/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
table.ball {empty-cells: show}
table.ball td {text-align:center;/*border:1px solid blue;*/}
table.ball td:nth-last-of-type(1) {text-align:right; }
table.ball td:nth-of-type(1) {text-align:left;}
select.sorter, select.dir {width:48.5%;}
</style>
</head>
<body>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="200">text</td>
<td width="200">text</td>
<td width="200">text</td>
<td width="200">text</td>
<td width="200">text</td>
</tr>
<tr>
<td colspan="5" align="middle" >
<table class="ball" width="100%" cellpadding="0" cellspacing="0">
<colgroup></colgroup>
<tr>
<td>
<!-- group1 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
<td>
<!-- group2 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
<td>
<!-- group3 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
<td>
<!-- group4 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>