Develop Reference

Text alignment without using table in html and css

I'm trying to learn HTML and CSS and using the old-school approach by creating a login page with three input controls (two text and one button). However, I'm using <table></table> for the alignment issues of textboxes. But I've read somewhere that using tables is not considered a good approach. This is what I'm doing:
Home.html
<div>
<table>
<thead>
<tr><th><span>Login Page</span></th></tr>
</thead>
<tbody>
<tr>
<th><label>Username:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th><label>Password:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="button" value="Submit" /></td>
</tr>
</tbody>
</table>
</div>
However, I'm using some beginner stuff of CSS to align input controls without using tables and this is what I'm trying:
Home.html
<div class="box">
<span>Login Page</span>
<br />
<span>
<label>Username:</label>
<input type="text" value="" />
<br />
<label>Password:</label>
<input type="text" value="" />
<br />
<input type="button" value="Submit" />
</span>
</div>
style.css
.box {
margin: 10px 10px 10px 10px;
border: dotted 2px #fff;
width: 500px;
}
.box span:first-child {
border: dotted 1px;
margin-left: 30%;
font-family: Arial, sans-serif;
width: 50%;
}
.box span label:nth-of-type(odd)
{
color:blue;
font-family: Arial, sans-serif;
}
.box span label:nth-of-type(even)
{
color: red;
font-family: Arial, sans-serif;
display: inline-block;
}
My concern is using css, I'm able to align the input controls but I have to use multiple break tags (<br />) and also extra code for alignment which is easier by simply using the <table> tag. Can someone suggest me the standard approach and either I'm on the right path or not?

#iSahilSharma Please find following code without using table. I hope you were expecting the same. A part from it just a suggestion that start using Bootstrap framework instead of using custom coding.
.main_container{
width:100%;
}
.inner_box {
margin: 40px auto;
width: 30%;
}
.inner_box span{
clear: both;
display: block;
}
.inner_box span:first-child{
margin-bottom:10px;
}
.inner_box span:nth-child(n+2){
margin-bottom:20px;
}
<div class="main_container">
<div class="inner_box">
<span>Login Page</span>
<span>
<label>Username:</label>
<input type="text" value="" />
</span>
<span>
<label>Password:</label>
<input type="text" value="" />
</span>
<span>
<input type="button" value="Submit" />
</span>
</div>
</div>

Although tables are a very good approach for forms but I prefer the much shorter and easier method ie CSS tables
Here is a code:
form {
display: table;
}
p {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>

As a small addition to the things that are said already, I would recommend you to consider an option to use a separate container for a single form control and its label. Like this:
<form>
<div class="input-group">
<label for="name">Username:</label>
<input type="text" id="name" value="" />
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="text" id="password" value="" />
</div>
</form>
Perhaps, one might say this is redundant, but from my perspective, it gives you more control during positioning. On the other hand, Michael Seltenreich is making a good point. I still find tables used for forms in many places, although I'd prefer to keep away from this method.
P.S. In case you want to spread labels and inputs horizontally, you would probably want to use flexboxes.

Using table is not always good. One way to do is
<div class="form-wrap">
<h2>Login Form</h2>
<div class="form-field">
<label>User Name</label>
<input type="text" value="" />
</div>
<div class="form-field">
<label>Password</label>
<input type="text" value="" />
</div>
<input type="button" value="Submit" />
</div>
CSS:
.form-field label {
width: 80px;
display: inline-block;
}
.form-field {
margin-bottom: 10px;
}
link to codepen

Tables are not a good approach for many reasons, but tables ARE ideal for forms of the type you are trying to create.

Dynamic width for a disabled input data

First of all I already did try researching how to make my input to be dynamic based from the from the width of its data but all answers that I could see is from the input which is not disabled. Its trigger is from key up or onclick which is not applicable to mine since my input is disabled.
This is the screenshot of my problem. As you can see my amount in words in Pesos is cut and is not dynamically expanding.
This is my html:
<table width="100%">
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabelBold">Check Number:</div>
<div style="float:left">
<input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Check Date:</div>
<div style="float:left">
<input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly /></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Client Name:</div>
<div style="float:left"><input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly /> </div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Amount:</div>
<div style="float:left"><input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Pesos:</div>
<div style="float:left"><input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all"
style="min-width:250px;" readonly /></div>
</div>
</td>
</tr>
</table>
Question:
Is it really possible to be dynamic even though my input is disabled? If yes how? if no why?
Requirements:
The minimum width of my input Pesos should be 250px because it needs to be aligned to other input.
My problem is only with the input of Pesos
HTML, CSS or Javascript solution is accepted.
I think I don't need to include my css styles anymore since it would not be needed. If css is the solution just add a new class.
I prepared a jsfiddle here

Using only CSS, one cannot make an <input> expand its size based on content. It is possible via Javascript, though (see Rayon Dabre's solution).
But the simple answer here would be to use an element that naturally expands to show its content, like a <span>, and style it to look like an input:
From your picture, I'm approximating something close to :
span.disabledInput {
display: inline-block;
background-color: #F0F0F0;
border-radius: 6px;
border: 1px solid #EEE;
}
You can even make it editable. Here's a more convincing example:
.form-control.disabledInput {
height: initial;
background-color: #eee;
border: 1px solid #ccc;;
display: inline-block;
clear: left;
width: auto;
color: #666;
box-sizing: border-box;
}
.form-control.disabledInput:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-group.col-xs-12 label {
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="form-group col-sm-6">
<label for="checkNumber">Check Number:</label>
<input type="password" class="form-control" name="checkNumber" id="checkNumber">
</div>
<div class="form-group col-sm-6">
<label for="checkDate">Check Date:</label>
<input type="text" class="form-control" name="checkDate" id="checkDate" readonly>
</div>
<div class="form-group col-sm-6">
<label for="clientName">Client Name:</label>
<input type="text" class="form-control" name="clientName" id="clientName" readonly>
</div>
<div class="form-group col-sm-6">
<label for="amount">Amout:</label>
<input type="text" class="form-control" name="amout" id="amount" readonly>
</div>
<div class="form-group col-xs-12">
<label>Pesos:</label>
<span type="text" tabindex="0" contenteditable="true" class="form-control disabledInput">To make this <code>span</code> not editable, remove the <code>contenteditable</code> attribute... <br />Don't forget to resize your browser!</span>
</div>
</div>
If you want to match the exact styling, you should inspect the disabled <input>. Pay close attention to line-height, font-size, padding and margin properties. Also, don't forget to add the tabindex attribute so it can be :focus-ed, like the real <input>s in the page.
Now, because your input is disabled, that's about all you need to do.
However, if your fake "input" wasn't disabled you'd have to add contenteditable="true" to it. And if it had to be part of your form on submission, you'd also have to add an <input type="hidden"> that would change its value to match the .text property of your <span>. Again, resorting to JavaScript.

Consider static constant as the width of the character Which can not be accurate by the way as H and I can not consume same space.
Try this:
document.getElementById('amountInWords').style.width = document.getElementById('amountInWords').value.length * 7 + 'px'
<table width="100%">
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabelBold">Check Number:</div>
<div style="float:left">
<input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Check Date:</div>
<div style="float:left">
<input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Client Name:</div>
<div style="float:left">
<input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly />
</div>
</div>
</td>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Amount:</div>
<div style="float:left">
<input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:35px">
<div style="float:left" class="controlLabel">Pesos:</div>
<div style="float:left">
<input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" style="min-width:250px;" value="One Thousand Nine Hundred Forty Nine Pesos only and this is fake msg" readonly />
</div>
</div>
</td>
</tr>
</table>

It is not expanding because it’s a part of your first column. It just cannot go on the second one.
To fix it, add
<td colspan='2'>
on your last TD (To indicate it to take space of both columns)
Example : http://reference.sitepoint.com/html/th/colspan/demoframe

Sharing a table cell between other cells HTML5

I am not sure of the best way of asking the question I would like the answer to but I will try my best. Please let me know if I am not clear or you need more information understanding what I want to achieve.
Currently, I have two tables one containing peoples name (represented by person1, person2 ....) and other a comment section. Please have a look here: https://dl.dropboxusercontent.com/u/53441658/peoplecomment.html.
The code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PersonComment</title>
</head>
<script>
function toggleTable() {
var myTable = document.getElementById("commentfield");
myTable.style.display = (myTable.style.display == "table") ? "none" : "table";
}
</script>
<body>
<table width="300" border="1" id="people" onClick="toggleTable()">
<tbody>
<tr>
<td id="cell1"><div> Person1</div></td>
<td id="cell2"><div> Person2</div></td>
</tr>
<tr>
<td id="cell5"><div> Person3</div></td>
<td id="cell6"><div> Person4</div></td>
</tr>
<tr>
<td id="cell9"><div> Person5</div></td>
<td id="cell10"><div> Person6</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="commentfield">
<tbody>
<tr>
<td id="comment"><div contenteditable> Your comment here</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Each cell in the first table, containing peoples name contains a function that toggles on and off table 2 the comment section (commentfield).
Aim of this table
When user click on cell it should allow them to put comment in the comment section and bind that comment with the cell they clicked and not sure this comment on another cell when clicked.
What I want to achieve:
I want to share the comment section between all the peoples, so say for example, if someone clicks on person1 and puts a comment, then someone else clicks on person2, I don't want the comment of person1 to show but instead I want the person to be able to add a new comment for person2. However, when say for example, I click on person1 again, I want the comment that was added to person was to be shown in the comment section.
Little scenario:
Screenshot 1 is how the app looks like currently.
Screenshots that has orange border on them shows that someone has clicked on person and added a comment.
Screenhots that has green border on them shows that someone has clicked on person and added a comment.
Screenhots that has yellow border on them shows that someone clicked on person1 and show the comment that was added for person1 and then they clicked on person2 and show the comment added for person2.
The last screenshot shows that person2 comment has been edited and now if someone clicks on this there will see the new comment.
Note:
The commentfield cell is editable, therefore allowing people to write stuff
One approach of this would be, saving the comment of each person in a variable allocated to them based on maybe the cell id and loading back the variable value to the comment section.
Having little to no knowledge of programming I am not sure how I can do this, any help is welcomed.

You could include forms tag and use them.
They will help to trigger wich contenteditable is to be seen (CSSS or JS)
here a CSS example of the idea
input+div[contenteditable],
input[name="person"] {
position: absolute;
right: 9999px;
}
input:checked + div {
position: static;
}
label {
/* optionnal*/
display: block;
}
/* trick to simulate js toggle */
table {
position: relative;
}
[for="hide"] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4.7em;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
z-index: 1
}
:checked~[for="hide"] {
pointer-events: auto;
}
<form>
<table width="300" border="1" id="people" onClick="toggleTable()">
<tbody>
<tr>
<td id="cell1">
<div>
<!-- was the div usefull here ? if not; it can be avoided -->
<label for="c1">Person1</label>
</div>
</td>
<td id="cell2">
<div>
<label for="c2">Person2</label>
</div>
</td>
</tr>
<tr>
<td id="cell5">
<div>
<label for="c3">Person3</label>
</div>
</td>
<td id="cell6">
<div>
<label for="c4">Person4</label>
</div>
</td>
</tr>
<tr>
<td id="cell9">
<div>
<label for="c5">Person5</label>
</div>
</td>
<td id="cell10">
<div>
<label for="c6">Person6</label>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="comment" colspan="2">
<input type="radio" id="c1" name="person" />
<div contenteditable id="p1"> Your comment here person 1</div>
<input type="radio" id="c2" name="person" />
<div contenteditable id="p2"> Your comment here person 2</div>
<input type="radio" id="c3" name="person" />
<div contenteditable id="p3"> Your comment here person 3</div>
<input type="radio" id="c4" name="person" />
<div contenteditable id="p4"> Your comment here person 4</div>
<input type="radio" id="c5" name="person" />
<div contenteditable id="p5"> Your comment here person 5</div>
<input type="radio" id="c6" name="person" />
<div contenteditable id="p6"> Your comment here person 6</div>
<label for="hide"></label>
<input type="radio" id="hide" name="person" />
</td>
</tr>
</tfoot>
</table>
</form>

How to show the text in the corner of border of a div?

I want to show a text like below in the html page, how to do this?
This is what I tried up to now.
<div class="filterleft" style="display: inline-block;">
<div id="filterleft_border" style="border-style:solid; border-width:1px;" >
<label class="category-label" for="category">Filter: </label>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="filterValue" style="width: 50px"/>
</div>
</div>
I created a fiddle for this,
http://jsfiddle.net/KendoDev/kzf6257h/
But what I want is,

You'll have to use HTML <fieldset> and <legend> to make that work.Its really simpler to use it..See more about this in W3Schools
See the
fiddle
HTML
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px;" >
<legend>Filter: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 50px"/>
</fieldset>
</div>

If you dont want to use fieldset use it like below.
.category-label
{
position:absolute;
top:0px;
left:12px;
padding-left:3px;
padding-right:3px;
background:white;
}
DEMO

If you wanted it to be specifically the label that was positioned like the legend you could do:
http://jsfiddle.net/ahallicks/kzf6257h/5/
#filterleft_border {
padding: 10px;
position: relative;
}
.category-label {
background: #FFF;
left: 5px;
position: absolute;
top: -10px;
}
Note, the relative positioning will keep the label within the confines of the border in cae you needed to use it more than once.

It's a fieldset. I tried to change your code a little bit. Check it out.
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px; border-radius:6px;" >
<legend style="font-family:Tahoma;font-size:11px;font-weight:bold">Filters: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 150px"/>
</fieldset>
</div>
Here is the document in W3schools

Table HTML overflow

I'm trying to make a better looking memberlist for my website. http://www.pimpkings.com/memberlist
<table width="100%" rules="cols" border="1" cellspacing="2" cellpadding="1">
<colgroup span="5" </colgroup>
<tr>
<td class="{memberrow.ROW_CLASS}" td align="center" width="200" valign="top" border="0" cellpadding="0">
<span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span>
<div class="avatar mini">{memberrow.AVATAR_IMG}</div>
<align="center" border="0" cellspacing="0" width="200">
<center><font face="verdana" decoration="yes" size="2" color="white">Information</font></center>
<br /><font face="verdana" size="1" color="green">Interest:</font> <br />
<span class="gen">{memberrow.INTERESTS}</span>
<br /><font face="verdana" size="1" color="green">Join Date:</font> <br />
<span class="gensmall">{memberrow.JOINED}</span>
<br /><font face="verdana" size="1" color="green">Last Visited:</font> <br />
<span class="gensmall">{memberrow.LASTVISIT}</span>
<br /><font face="verdana" size="1" color="green">Post Count:</font> <br />
<span class="gen">{memberrow.POSTS}</span>
<align="right" border="0" cellspacing="2" width="200">
<center> <br /><font face="verdana" size="2" color="green">Contact</font><br /></center>
{memberrow.PM_IMG}
{memberrow.WWW_IMG}
</tr>
</td>
</body>
Problem is when I add another
<td>
It makes it duplicate the information I am calling upon. I will actually make the code the way i am talking about so when you visit the site you will see what I am talking about. I just don't want it to duplicate any members information. so basically
Member 2. Member
Member 4. Member
Member 6. Member
Is what I mean
not
1.Member 1.Member
2.Member 2.Member
...
Is there any way possible to do this? I am using a forum website and i have access to the CSS stylesheet and where this code is. Maybe a Javascript code??? Please help asap for the code I am doing is for an open site but is needed for a soon be opened site that is being paid for. Please and thank you everyone.
Also any way of making a background image repeat for the members background table??
I'd Like to have 3 columns made that is calling on the variables listed in the code without repeat.
Thanks again

You shouldn't use tables. Welcome to the world of CSS floats. Here's a shiny new example for you:
HTML
<ul class="tableHold">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
.tableHold {
overflow: auto;
}
.tableHold li {
float: left;
width: 100px;
border: 1px solid black;
}
Here's some more information on how things work.
Here's a fiddle to play with.

HTML
<div class="tableHold">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
</div>
CSS
.tableHold {
overflow: auto;
}
.tableHold div {
float: left;
width: 100px;
border: 1px solid black;
}
Try this on http://codebins.com/bin/4ldqpak