StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
14069648
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-12-28T12:33:37.330
FavoriteCount
0
LastActivityDate
2012-12-28T12:33:37.330
LastEditDate
LastEditorUserId
0
OwnerUserId
1929934
ParentId
14024366
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
<p>I am going to give you the answer - but first I want to explain some semantics and how one can properly code a form WITHOUT using tables.</p> <p>Html form have been around since the inception of html. You will be amazed how many html form elements ARE NOT utilized when they simply exist to help you code properly semantic html. Proper semantic html means:</p> <p>1) Your code is accessible to text viewers such as Google search engine and browsers used by blind people 2) Fulfills federal law (US laws require school/government websites to be accessible) 3) Will make it easier for you to code the backend (php) in the long run.</p> <p>A form at its barebones should include:</p> <pre><code><form> <fieldset> <div> <label for="first-name">First Name</label> <input type="textbox" name="first_name" id="first-name" value="" /> </div> <div> <label for="gender_selection">Gender</label> <select name="gender" id="gender_selection"> <option value="male">Male</option> <option value="female">Female</option> </select> </div> </fieldset> </form> </code></pre> <ul> <li>You must have a <code>fieldset</code> tag for each <code>form</code> tag.</li> <li><code>label</code> tag is used to define what the form element stands for. THIS IS WHAT tells a text viewer what each form element stands for! Sure you can do without but why when this tag was created for exactly that purpose.</li> <li>The div tags will allow you to easily style errors/corrections needed.</li> </ul> <p>CSS</p> <pre><code>form div { overflow: hidden; } form div label { float: left; width: 120px; padding: 0 20px 0 0; } form div input, form div select { float: left; width: 220px; } </code></pre> <p>Simple css (not tested) to mimic your tabular forms with the added advantage of not using tables, being accessible, and using proper html.</p> <p>Now if a user made an error with in let us say <code>first name</code> we simply add class <code>.error</code> to that div:</p> <pre><code> <div class="error"> <label for="first-name">First Name</label> <input type="textbox" name="first_name" id="first-name" value="" /> </div> </code></pre> <p>CSS:</p> <pre><code>div.error label { color: red; } div.error input { border: red; color: red; } </code></pre> <p>ANSWER TO YOUR QUESTION:</p> <p>Your html form "label" elements do not have a fixed width. Add a fixed width by either adding an extra <code><td></code> column or using the code I provided above.</p> <p>Hopefully this post will help you for the future.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POAlign Forms correctly
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USProfileTwist
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.