Form outside table php - php

Question

I have a problem with mapping together table and form. In my table I have some values that with help of a form I want to redirect to a page.I have read that I cannot put a form into a table so I tried not to. But if I let
<form>
<table>
structure, my display on page isn't very nice and I am not responsabile with frontend part but anyway I want to not be problems with it.If I let the table, without the form the display is ok(like in image). An image in left page and the table with the information in the right part. When using form, the table goes down and it's not good. So how to do? I try to include an image here to see how my page looks like without the form, but I really need to use the form. Any suggestion how to resolve this?I mean it's possible to have the display like in the photo but plus using a form and to not change the display?
EDIT: the css where tables are displayed
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
table th {
padding-right: 40px;
}
html {overflow-y: scroll; overflow-x: hidden;}
body {font-family: 'Open Sans', sans-serif; background:#f0eeed; color: #676767;}
.wrapper {width: 980px; margin: 0 auto;}
#content {padding: 20px 0 80px;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ef8887; border-bottom: 3px solid #db7a78;}
.header .branding-title {float: left; margin: 0 0 0 5px; font: 0/0 serif; text-shadow: none; color: transparent; width:225px; height:125px;background:url(../img/branding-title.png) 0 6px no-repeat;padding: 6px 0;}
.header .branding-title a {display: block; height: 125px; width: 225px;}
.header .nav {float: right; top: 10; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li a {
color: white;
text-decoration: none;
display: block;
line-height: 95px;
padding: 10px 0 0;
margin: 0 0 0 50px;
width: 100px;
text-align: left;
background: url('../img/nav-sprite.png') no-repeat 0px 105px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
}
.header .nav li.on a {text-decoration:underline;}
.header .nav li a:hover, .header .nav li a:active {opacity: 0.7;}
.header .nav li.books a {background-position: 8px -5px;}
.header .nav li.movies a {background-position: 13px -105px;}
.header .nav li.music a {background-position: 15px -235px;}
.header .nav li.suggest a {background-position: 35px -340px;}
#content {min-height: 400px; background: white;}
.section.page:after {content:"";display:block;visibility:hidden;height:0;clear:both;}
.section.page {padding: 34px 0; background: white;}
.section.page h1 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
}
.section.page .media-details h1 {
text-align: left;
}
.section.page p {width: 475px; margin-left: auto; margin-right: auto; }
.section.page .media-details h1 .price {color: #9d9f4e; padding-right: 10px; font-size: 34px;}
.section.catalog {padding-bottom: 42px;}
.section.catalog h2 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
padding-top: 20px;
}
.section.catalog ul.items {margin: 0 0 -17px 0; padding: 0; width: 997px;}
.section.catalog ul.items li {
display: inline-block;
list-style: none;
width: 204px;
text-align: center;
padding: 14px;
margin: 0 0 17px 17px;
position: relative;
left: -17px;
}
.section.catalog ul.items li a:hover:after {
content: '+';
font-size: 50px; position: absolute; top:35px; right:30px; color: #3888c2; vertical-align: top;
}
.section.catalog ul.items li a {
background: white;
display: block;
padding: 30px 0 10px;
text-decoration: none;
}
.details-button {
color: #888;
}
.section.catalog ul.items li a:hover {
opacity: 1;
color: #666;
}
.section.catalog ul.items li img {
width: 190px;
border: 6px solid #f0eeed;
}
.section.catalog ul.items li p {
margin-left: 0;
margin-right: 0;
width: auto;
}
.media-picture {
float: left;
width: 400px;
text-align: center;
border: 1px solid #d9d9d9;
padding: 14px;
background: #f0eeed;
}
.media-picture span {
background: white;
display: block;
width: 100%;
padding: 36px 0 61px;
}
.media-picture img {width: 292px;}
.media-details {
width: 460px;
float: right;
}
.media-details form {
margin-left: 0;
}
td, th {
padding: 5px 5px;
}
form {width: 475px; margin: 34px auto;}
form tr, tr {text-align:left;vertical-align: top; padding:2px;}
form table {width: 475px; margin-bottom: 16px;}
form th {
width: 150px;
vertical-align: middle;
padding: 8px;
}
form td {
padding: 15px 15px;
}
form td select,
form td input,
form td textarea {
width: 100%;
border-radius: 4px;
padding: 10px;
border: 1px solid #a5a5a5;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"] {
width: 475px;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 14px 0 16px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"]:hover {
background: #358dce;
cursor: pointer;
}
.search {
background: #f0eeed;
border-bottom: 3px solid #dddddd;
width:100%;
text-align:right;
}
.search form {
margin: 5px 5px 5px auto;
}
.search form input[type="submit"] {
width: auto;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 6px;
font-family: 'Open Sans', sans-serif;
}
.page p.message {
background: #ffeca4;
border: 1px solid #f16702;
padding: 1em;
width: 444px;
}
.breadcrumbs {
font-size: 14px;
font-weight: normal;
padding: 14px 0 48px;
}
.breadcrumbs a {
text-decoration: none;
color: #3888c2;
}
.note-designer {
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.footer {
background: #f0eeed;
border-top: 3px solid #dddddd;
padding: 42px 0;
font-size: 12px;
color: #a5a5a5;
}
.footer ul {margin: 0; padding: 0; float: left;}
.footer ul li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.footer ul li:after {content:" | "}
.footer ul li:last-child:after {content:"";}
.footer p {margin: 0; padding-right: 3px;}
.footer a {text-decoration: none; color: #539def; margin: 0 10px;}
.footer li:first-child a {margin-left: 4px;}
.footer a:hover, .footer a:active {text-decoration: underline;}
sorry for the long code but this is what I found in style css

Answer 1

As mentioned previously, avoid using tables for anything but actual tabular data. Using it to position elements on the page is unpredictable at best.
You said that you aren't responsible for the front end, but do you have access to the HTML? I'm sure many of us could give you some helpful suggestions but we need a reference point beyond a screenshot :).
You might want to check out how some CSS frameworks handle this, it might give you some inspiration (http://getbootstrap.com/css/#forms). I'm not a big Bootstrap guy but there are a lot of basic examples here on form / table formatting.

Answer 2

You should be able to put just about anything inside a form tag without affecting the way anything on the page looks. Assuming you can't just stop using tables asap, you may have to play around with the css to clean this up. If the form tag is affecting the way anything embedded inside it looks then you might have something in your CSS styling the form element. If possible I would eliminate this styling if it exists.