What do I have to do, so the inputs from the table will get smaller if I minimize the browser window? Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>
<input type=text>
</td>
<td>
<input type=text>
</td>
</tr>
<td>
<input type=text>
</td>
<td>
<input type=text>
</td>
<tr>
</tr>
</table>
</body>
</html>
Try to use percent in your css to resize
<style>
input[type="text"]{
width:10%;/* Whatever percent you want*/
}
</style>
<style>
input
{
width:100%;
height: 100%;
}
</style>
also add:
<table cellspacing="5px">
Hope this helps you
Related
I recently started using the foundation framework with email newsletters. As I can see I have to go back to the good old tables. I cannot understand why I have so big problems of centering/align a logo?
The logo is keep hanging to the left, instead of center. I have set a border on the tables so it is eaiser to see.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>A title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
<style type="text/css">
</style>
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top" style="border: 1px solid pink">
<center>
<table class="container" align="center" style="border: 1px solid green">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<img src="https://i1.wp.com/1stwebdesigner.com/wp-content/uploads/2016/04/line-art-logo.jpg?fit=600%2C400&resize=350%2C200" style="border:1px solid red" align="center">
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Finally after 2 hours searcing I found the answer here:
https://foundation.zurb.com/emails/docs/alignment.html
First of all, your document (!DOCTYPE) IS NOT XHTML. You need to use transitional or HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or
<!DOCTYPE html>
After that, you need:
<img src="https://i1.wp.com/1stwebdesigner.com/wp-content/uploads/2016/04/line-art-logo.jpg?fit=600%2C400&resize=350%2C200" style="border:1px solid red; margin: 0 auto;">
align="center" is NOT a valid HTML5 property, it is valid in HTML4+
I have a login page. It doesn't have much text, and it is quite readable in big screens, such as a laptop or a tablet. However, in a mobile one has to zoom it until he sees what is written there. I want to make it scalable, but it looks like I don't know how to do it. Here is the HTML.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
</tr>
<tr>
<td><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
You need to make adaptive and responsive design . You can use these libraries to help you make a responsive grid, for example:
http://getskeleton.com/
They use "media queries " for responsive design, you leave a link :
https://developer.mozilla.org/es/docs/CSS/Media_queries
Good luck :)
Try adding the below line between your <head>...</head> tag
<meta name=viewport content="width=device-width, initial-scale=1">
Only to give you an idea about the elements envolved...
Expand the snipet in fuul screen than resize browser page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
.big {
width:100%;
text-align:center;
}
#media only screen and (max-width: 600px) {
body {
font-size:1.6em;
}
input{
width: 90%;
font-size: 1.4em;
}
input[type="submit"] {
width: 50%;
}
}
</style>
</head>
<body>
<form name="form1" action="enter.php" method="post">
<table class="big">
<tr>
<td colspan="2">
<img src="http://www.lipsum.com/images/banners/grey_234x60.gif">
</td>
</tr>
<td align="right">Name:</td>
<td align="left"><input id="Username" name="Username" size="25" type="text"></td>
<td></td>
</tr>
<tr>
<td align="right">Pass:</td>
<td align="left"><input id="Password" name="Password" size="25" type="password"></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="text-align:left"><input type="submit" value="Sumbit"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
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.
The problem that I am having is while designing an email to be sent to users the border of the HTML table is not disappearing even though it is set to 0 and so leaves horrible white lines through areas which are menu to be solid blue colors, below is my HTML code!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="889" border="0" >
<tr>
<td>
<table width="882" border="0" bordercolor="#0099FF">
<tr>
<td colspan="4" bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#0099FF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#0099FF"> </td>
<td colspan="2" rowspan="2">content</td>
<td bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add cellspacing="0" to your second table:
<table width="882" border="0" bordercolor="#0099FF" cellspacing="0">
Probably cellspacing="0" fixes these lines?
Following code works fine with IE, but doesn't work with other browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function OnLoad() {
var tbl = document.getElementById("tbl");
tbl.addEventListener("keyup", OnKeyUp);
tbl.focus();
}
function OnKeyUp(event) {
alert(event.keyCode);
}
</script>
</head>
<body onload="OnLoad()">
<table id="tbl">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</table>
</body>
</html>
The problem is that the table element cannot be given focus in some browsers. If you add a tabindex property to the table, your code should work, as that will allow the table to receive focus:
<table id="tbl" tabindex="1">
<!--Rest of your code-->
</table>
Here's a working example.