Let's say we want to make a tic-tac-toe game. Is in possible with three TRs, each with only one TD containing three INPUTs? Or does each TR require three TDs, each TD containing one INPUT?
Really depends on what you want to do.
input{
width:50px;
height:50px;
text-align:center;}
<table>
<tr>
<td>
<input type='text' value="X">
<input type='text' value="O">
<input type='text' value="X">
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type='text'>
</td>
<td>
<input type='text'>
</td>
<td>
<input type='text'>
</td>
</tr>
</table>
Related
I'm having trouble identifying td and ts with css selectors. I'd like to move some elements around the page so gave them a div class. Howver using this in css doesn't seem to work.
What is the selector here please, as I can't understand if td, tr is acting as a label and in what sense?
Html:
<div class="ye">
<td>Your Email
</td>
</div>
<div class="ye1">.
<td><input type="text" name="email" /></td>
</div>
</tr>
<tr>
<div class="un">
<td>Username:</td>.
</div>
<div class="un1">
<td><input type="text" name="username" />.
</td>
</div>
</tr>
<tr>
<div class="pw">
<td>
<div align="right">Password:</div>
</td>
<td><input type="text" name="password" /></td>
</d iv>
</tr>
<tr>
<div class="
sub">
</td>
</div>
<div class="sub1">
<td><input name="submit" type="submit" value="Submit" /></td>
</div>
</tr ">
</table></form></body></html>
First of all, td inside a div is a big no no. Best practise it to keep the tr > td hirerarchy as is.
You can restructure it to have all your div inside td. Please check the code below.
<table>
<tbody>
<tr>
<td>
<div class="ye">
Your Email
</div>
</td>
<td>
<div class="ye1">
<input type="text" name="email" />
</div>
</td>
</tr>
</tbody>
</table>
Now, to use css,
table tbody .ye {
...
}
table tbody .ye1 input {
...
}
In HTML I am making a form where there are 2 tables side by side. In one table all the form <label>/Name/E Mail/Password</label> and in another table I am trying to put the form <inputs> text/email/password to make them look nicely visible.
But when I gave the label Message and <textarea name="Message" rows="1" cols="30"></text area> my whole form layout is getting disturbed due to which I am not able keep my initial labels and inputs aligned.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<table>
<tr>
<td>
<label>Name</label>
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
When the labels and inputs are aligned
When the labels and inputs are not aligned
There is no need for the extra table inside of the table, and you are including everything inside of 1 row, which is why its formatted like that.
You shouldn't be using tables for this, not when you have things like CSS Flexbox and CSS Grid. Here is a basic example of using flexbox with a form.
But if you must use a table, try a table format like this ...
<table>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
...
</table>
Here is an example using your code.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<label>Name</label>
</td>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</form>
I'm wondering if possible to arrange two checkbox input fields vertically in same td cell? Below is example, there both of input fields are next to each other.
<table>
<tr>
<td>
<input type="number" />
<input type="checkbox" name="ck1" id="ck1">A
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
How about using a simple <br> with using text-align:right on the <td>?
<table>
<tr>
<td style='text-align:right'>
<input type="number">
<input type="checkbox" name="ck1" id="ck1">A<br>
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
I have a simple login form and it is centered in internet explorer but in Chrome and Firefox it is aligned to the left of the page. What do I need to do to have the form centered in the other 2 browsers.
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
Try to change the form width to 100%. This the example
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>" style="width:100%;">
You should avoid using HTML tables to define the layout of your page. Here's a good overview on why tables should not be used for layout.
You should rely on HTML tag for semantic and CSS to tell the browser how he should display the stuff in the page.
Now consider the following:
<style>
form {
width: 200px;
margin: 0 auto;
}
input {
display: block;
margin: 5px 0;
}
</style>
<form name="form1" method="POST" action="/">
<h1>Client Login</h1>
<input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24">
<input name="mypassword" type="password" id="mypassword" placeholder="password" size="25">
<input name="Submit" type="submit" class="submit_button" value="Login">
</form>
The HTML is stripped down to the bare essential: your title then your form elements. The form here is the main container. With CSS we tell the form to have 200px width and we use the margin property to center it.
We also tell the input element to display like a block element to fill it'S container, this way they each occupy 1 line.
Learning CSS is useful to separate appearance from meaning, here's a great demonstration of the relation between content, container and design.
Would you mind to try this maybe :)
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
I am using Bootstrap 2.3 and I have like 7 text input fields inside a table that uses bootstrap table style. I would like to resize (or shrink the width of) these text inputs instead of taking the whole width of the table cell but I could not do that
I tried to use the class of span1 but it did not shrink them well. So is there any way of minimizing the size or width of all text input fields within the table cell?
Here's my code:
<table class="table table-bordered">
<thead>
<tr>
<th>Exercise</th>
<th>Exercise Code</th>
<th>Initiated by</th>
<th>Initiated on</th>
<th>Done by</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
For Action
</td>
</tr>
</tbody>
</table>
Since you have access to JQuery, try doing this in your <header> area of html, but be sure it is after all Javascript includes.
<script type="text/javascript">
$(".span1").css("width", "10px");
</script>
If the above works, I think you need to update your original post to show all your js/css includes. This seems like you just have something in the wrong order.
--Original Answer Below--
Could you not simply add a CSS entry in your header like:
.table > input[type="text"] {
width: 10px;
}
The only negative is that this will change all table type=text elements that use the .table class.
So instead, have the table itself have the span1 tag and change the above code to reflect it?
.span1 > input[type="text"] {
width: 10px;
}
*Note: Make sure this is AFTER you reference the bootstrap css.