How can I center a specific item within a table? - html

I create one Sign Up form where it will be connected afterwards with SQL Database using PHP. The problem is that I can not center the submit button within the table. As far as I know HTML5 does not support table functionality. All HTML code it's in PHP file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section>
<form action="#" method="post">
<table>
<tr>
<td><label>Full Name:</label><td>
<td><input type="text" placeholder="Full Name" name="name" ><br></td>
</tr>
<tr>
<td><label>E-mail:</label><td>
<td><input type="email" placeholder="E-mail" name="email" ><br><td>
</tr>
<tr>
<td><label>Username:</label><td>
<td><input type="text" placeholder="Username" name="username" ><br><td>
</tr>
<tr>
<td><label>Password:</label><td>
<td><input type="password" placeholder="Password" name="password" ><br><td>
</tr>
<tr>
<td><input type="submit" name="Registration" value="Submit" ><br><td>
</tr>
</table>
</form>
</section>
</body>
</html>
body {
background: #40E0D0;
background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
}
form {
text-align: center;
display: flex;
justify-content: center;
}
table {
display: flex;
background-color: lightcyan;
margin: 15px;
padding: 15px;
}
tr {
text-align:center;
}
td {
margin-right: 10px;
}
input {
width: 300px;
height: 25px;
}


1). You should add a colspan to the last td.
2). Make sure the closing tags are formatted correctly -> you should use </td>, when you close a "td" tag. See the updated HTML below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<section>
<form action="#" method="post">
<table>
<tr>
<td><label>Full Name:</label></td>
<td><input type="text" placeholder="Full Name" name="name" ></td>
</tr>
<tr>
<td><label>E-mail:</label></td>
<td><input type="email" placeholder="E-mail" name="email" ></td>
</tr>
<tr>
<td><label>Username:</label></td>
<td><input type="text" placeholder="Username" name="username" ></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" placeholder="Password" name="password" ></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Registration" value="Submit" ></td>
</tr>
</table>
</form>
</section>
</body>
</html>

Related

How to remove hover from Submit and Reset Button

What command do i need to use to don't make it zoom when i click "submit" or "reset" button. I want them just to look normal. i am supposed to use hover for this program but not for the last 2 buttons
Please see code below of what i have so far. anything is appreciated
<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input:focus{
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input:hover{
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Tried playing with the code but i can't figure it out

<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input[type="text"]:hover, input[type="password"]:hover {
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input[type="text"]:focus, input[type="password"]:focus {
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Changed the way you call the style. By passing in the [type=text] in CSS, you make sure that only type=text and type=password pick up the styles, and making the submit and the reset button not pick up the styles.

You'll need to add default style for when it's not hovering or in focus. Try adding this to your the area between your style tags:
input {
background-color: black;
height: 40px;
width: 280px;
color: white;
font-size: 24px;
}
If that's not what you intended, Yash Digant Joshi may have a better answer.

Add hover effect on input which is not submit or reset.
:where(input:not([type="submit"]):not([type="reset"])):hover

How do I bring the entry box closer to the names in html?

I am trying to bring the entry fields closer to the names; it looks bit far. wanted to see if anybody can suggest. Html and css are shown below. This is how it looks now:
<div id="container">
<h3>Add Student</h3>
<form action="StudentControllerServlet" method="GET">
<input type="hidden" name="command" value="ADD" />
<table>
<tbody>
<tr>
<td><label>First name:</label></td>
<td> <input type="text" name="firstName"/></td>
</tr>
<tr>
<td><label>Last name:</label></td>
<td><input type="text" name="lastName"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
</table>
</form>
</div>

/* To mimic your screenshot */
#container table {
width: 50%;
outline: red 1px dotted;
}
/* To align your text closer */
#container table td:first-child {
outline: green 1px dashed;
text-align: right;
}
<div id="container">
<h3>Add Student</h3>
<form action="StudentControllerServlet" method="GET">
<input type="hidden" name="command" value="ADD" />
<table>
<tbody>
<tr>
<td><label>First name:</label></td>
<td> <input type="text" name="firstName"/></td>
</tr>
<tr>
<td><label>Last name:</label></td>
<td><input type="text" name="lastName"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
</table>
</form>
</div>

Cells going out of Row

Last 3 cells are going out of table. How to make them come inside the table.
"UG(Date of Joining)" should be just next to first date picker.
Overall there should be 5 cells in that 1 row.
html,body{
background: rgb(211, 212, 218)
}
.table{
background-color: rgb(211, 212, 218);
}
<div class="table">
<table cellpadding="8" border="2" , align="center" style="width: 100%;">
<form>
<tr style="background-color: royalblue;">
<th style="color: white;" colspan="2"> <tt style="font-size: larger;">Acedamic Details</tt></th>
</tr>
<tr>
<th>Student Name</th>
<td>
First Name <label><input type="text"></label>
Middle Name <label><input type="text"></label>
Last Name <label><input type="text"></label>
</td>
</tr>
<tr>
<th>UG (Date of Joining)</th>
<td><input type="date"></td>
<th>UG (Date of Joining)</th>
<td><input type="date"></td>
<td>
<button title="button title" class="action primary tocart" onclick=" window.open('marks.html'); return false;">Upload Marks</button>
</td>
</tr>
</form>
</table>
</div>

To make each row in the table a form, you can use the following structure:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid rgb(218, 218, 223);
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.inputs{
height: 25px;
}
.submitButtons{
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Start Date</td>
<td>Stop Date</td>
<td>Save</td>
</tr>
<tr>
<td>
<form id="form1"><input type="hidden" name="id" value="1" /></form>
</td>
<td><input class="inputs" form="form1" type="text" name="name" placeholder="Enter First Name" /></td>
<td><input class="inputs" form="form1" type="text" name="description" placeholder="Enter Last Name" /></td>
<td><input class="inputs" form="form1" type="date" value="Save" /></td>
<td><input class="inputs" form="form1" type="date" value="Save" /></td>
<td><input class="submitButtons" form="form1" type="button" value="Save" /></td>
</tr>
<tr>
<td>
<form id="form2"><input type="hidden" name="id" value="2" /></form>
</td>
<td><input class="inputs" form="form2" type="text" name="name" placeholder="Enter First Name" /></td>
<td><input class="inputs" form="form2" type="text" name="description" placeholder="Enter Last Name" /></td>
<td><input class="inputs" form="form2" type="date" value="Save" /></td>
<td><input class="inputs" form="form2" type="date" value="Save" /></td>
<td><input class="submitButtons" form="form2" type="button" value="Save" /></td>
</tr>
</table>
<script>
/* Scripts */
</script>
</body>
</html>

Your table can have maximum two td or th whereas on the last tr you have defined five td & th. What you really should do is on the first tr do colspan=5 instead of doing colspan=2 and on the second tr do one with colspan=2 and another with colspan=3 and leave last tr as it is.
Your code should look like this:
<table border="1px">
<tr>
<td colspan="5">5</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="3">3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

Need to center a table within a fieldset within a form

I had a quick HTML/CSS question I hope someone could help me with!
I am trying to learn the specifics of CSS in an online course. I am trying to do a very specific alignment with CSS within a form within a fieldset within a table. I need to have a fieldset split down the middle, and have the label directly on the left, and the input of the form directly on the right. I uploaded 2 pictures: what I have so far and what I am hoping to get, to give a visualization of what I am trying to achieve.
For anyone versed in CSS I am sure this is very easy but it's confusing me. Was just hoping to get some direction!
What I have:
http://imgur.com/gKoWux7
What I want to get:
http://imgur.com/IfeK8D1
Ignore the repetitive code/names in the first image, I am just worried about the alignment of the labels, inputs and buttons.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Here is my CSS:
body {
background-color: #A8F89C;
margin: auto;
width: 50%;
}
table {
width: 400px;
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
width: 50%;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28,67,14);
}
Thank you so much for any help!!!

I just have read your requirement what you want to get.
You can use below mentioned css to get layout like this image
http://imgur.com/IfeK8D1
<style>
fieldset,table{
width:100%
}
td{
width:50%;
}
tbody tr td:first-child{
text-align:right;
padding-right:20px;
}
I hope it will usefull for you as per your need.
Thanks

My idea would add this CSS to (Because label doesn't fill the entire width of the td as label is not a block level element)
td label{
width:100%;
display: inline-block;
text-align:right;
}
or if you prefer you could something like this too, add
td {
text-align: right
}
but it moves all the td elements to right.

Snippet below
Take out the border if needed
body {
background-color: #A8F89C;
margin: auto;
}
table {
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
text-align: center;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28, 67, 14);
}
table {
border: solid red;
display: inline-table;
}
fieldset {
border: solid blue;
}
td:nth-child(1) {
text-align: right
}
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td>
<input type="submit">
</td>
<td>
<input type="reset">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

First of all using div maybe easier to use ..I have modify a bit of your html where i get rid of the tr and td and use div .Hope this help
<div align = "center">
<label>First Name:</label>
<input type="text">
</div>

How to align form at the center of the page in html/css

I am new to html/css. i am trying to build up my own form and i am trying to align it in the center. I used the align property in css but its not working.
Html code:
<!DOCTYPE HTML>
<head>
<title>Web Page Having A Form</title>
<link rel = "stylesheet" type="text/css" href="Form.css">
</head>
<body>
<h1>Create a New Account</h1>
<form >
<table>
<tr>
<td>Name :</td> <td><input type="text" name="name"></td><br>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email"></td><br>
</tr>
<tr>
<td>Password :</td> <td><input type="password" name="pwd"></td><br>
</tr>
<tr>
<td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
Css Code:
body
{
background-color : #484848;
}
h1
{
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form
{
align:"center";
}
How should i change my code to align the entire form in the center?

Like this
demo
css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 0 auto;
}

This is my answer. I'm not a Pro. I hope this answer may help you :3
<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>

Wrap the <form> element inside a div container and apply css to the div instead which makes things easier.
#aDiv{width: 300px; height: 300px; margin: 0 auto;}
<html>
<head></head>
<body>
<div>
<form>
<div id="aDiv">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name">
</td>
<br>
</tr>
<tr>
<td>Email :</td>
<td>
<input type="text" name="email">
</td>
<br>
</tr>
<tr>
<td>Password :</td>
<td>
<input type="password" name="pwd">
</td>
<br>
</tr>
<tr>
<td>Confirm Password :</td>
<td>
<input type="password" name="cpwd">
<br>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>

I would just use table and not the form. Its done by using margin.
table {
margin: 0 auto;
}
also try using something like
table td {
padding-bottom: 5px;
}
instead of <br />
and also your input should end with />
e.g:
<input type="password" name="cpwd" />

Or you can just use the <center></center> tags.

Wrap the element inside a div container as a row like
your form here or something like that.
Set css attribute:
width: 30%; (or anything you want)
margin: auto;
Please take a look on following picture for more detail.