Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There's not enough information to answer your question. Like Pekka said, is it a table or not?</p> <p>Is it a form? I'm assuming so, if it has textboxes, textareas, etc. If it's a form, you could use a container for the two left columns and one for the right.</p> <pre><code>&lt;style type="text/css"&gt; div#formLeft { float: left; } textarea { display: block; } &lt;/style&gt; &lt;div id="formLeft"&gt; &lt;label&gt;Form Field 1&lt;/label&gt;&lt;input type="text" /&gt;&lt;br /&gt; &lt;label&gt;Form Field 2&lt;/label&gt;&lt;input type="text" /&gt;&lt;br /&gt; &lt;label&gt;Form Field 3&lt;/label&gt;&lt;input type="text" /&gt;&lt;br /&gt; &lt;label&gt;Form Field 4&lt;/label&gt;&lt;input type="text" /&gt;&lt;br /&gt; &lt;label&gt;Form Field 5&lt;/label&gt;&lt;input type="text" /&gt;&lt;br /&gt; &lt;/div&gt; &lt;div id="formRight"&gt; &lt;textarea&gt;&lt;/textarea&gt; &lt;textarea&gt;&lt;/textarea&gt; &lt;/div&gt; </code></pre> <p>Now, obviously there is a lot more need to be done, but this the bare bones.</p> <p>Recommendations? Style <code>label</code> with a fixed width to keep it looking tabular. Of course adjust the heights and everything to make it fit. Since the boxes on the right, which I assume are textareas, just give them IDs and heights.</p> <p>I took a screenshot to help visualize my code without actually entering it in. This is how I assume your layout is, but of course you can easily add other columns. Just make the <code>formLeft</code> ID turn into a class and throw in another!</p> <p><a href="http://img94.imageshack.us/img94/5341/testbp.gif" rel="nofollow noreferrer">alt text http://img94.imageshack.us/img94/5341/testbp.gif</a></p> <p><strong>Edit:</strong> Image uploaded at image shack. I can't guarantee how long it'll be there.</p> <p>Good luck!</p>
    singulars
    1. This table or related slice is empty.
    1. POTableless html alternative
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USTarik
    1. USTarik
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe problem with this implementation is that the textareas on the right aren't positioned correctly as I asked. The only solution I've seen to remedy that is specifying actual pixel height and widths, which I don't believe is good practice. Thanks for your comment though.
      singulars
      1. PO
      1. USJose
    2. COUnfortunately if you want every browser to look the same, explicity height and widths for form elements are inevitable. Inputs, textareas, selects, etc. are horribly difficult to get to look the same without some very explicity CSS
      singulars
      1. PO
      1. USBob Fincheimer
    3. COSpecifying heights and widths is good practice. It is always a positive thing to define shape and size for elements on your site, so user agent stylesheets never change something in differen browsers. Just to be clear, you are styling them through CSS. It is still presentation separated content, whereas using tables for that layout breaks it. Also, tables are MORE complex for this layout than practical, as you can see how clean, short, and semantic the code I provided was.
      singulars
      1. PO
      1. USTarik
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload