For example, I wish to make a form look like this (or similar):    In this case, is this a job better suited for  &lt;table&gt; tag, or is it a better practice to use &lt;div&gt; and CSS?  I am aware of the topic that CSS is to be used for styling and tables are for tabular data.  However, form is not quite tabular, so it will make sense to use CSS to style the form (to align the form elements).  But then table tag has clearly assigned tags (td, tr, tbody, thead, etc), and if I use divs insteady, they will somewhat blend in with other divs semantically.  i.e.  is used for container, then  is used for a form, they all become homogeneous and require further inspection to see which is which while table is clearly outlined  I wanted to inquire as to what is currently acceptable practice for building and styling forms.    Note:  Perhaps forms do not have to be aligned as below, but I am not aware of any other reasonable way to present a form.  Also, imagine you have 5 or 6 such forms next to each other, it is not just one.
3930
It seems to be the  that tables should not be used for layout in HTML.   Why?  I have never (or rarely to be honest) seen good arguments for this. The usual answers are:   It's good to But this is a fallacious argument; . I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is  than using divs and CSS.By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs. Readability of the codeI think it's the other way around. Most people understand HTML, few understand CSS. It's better for SEO not to use tablesWhy? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective? Tables are slower.An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page. A layout overhaul is easier without tables, see .Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its  of CSS.   I am really interested in good arguments to use divs + CSS instead of tables.
38016
I try to make a table for language manual. Could anybody help me to manage curly brackets in the cells of a table?  Like this:    I tried to do it like  but I could't manage it.
26519
I'm pretty sure this is a simple question in regards to formatting but here's what I want to accomplish:  I want to output data onto the screen using cout.  I want to output this in the form of a table format.  What I mean by this is the columns and rows should be properly aligned.  Example:  Test                 1 Test2                2 Iamlongverylongblah  2 Etc                  1   I am only concerned with the individual line so my line to output now (not working) is  cout &lt;&lt; var1 &lt;&lt; "\t\t" &lt;&lt; var2 &lt;&lt; endl;  Which gives me something like:  Test                 1 Test2                  2 Iamlongverylongblah         2 Etc                  1
116918
When using divs when is it best to use a class vs id?   Is it best to use class, on say font variant or elements within the html? Then use id for the structure/containers?   This is something I've always been a little uncertain on, any help would  be great.
22401
This is similar to:  and , but is slightly different. The other questions are asking more of a why question, not a please do this question. I am asking for a specific implementation of Markdown tables. I found  on making tables in Markdown using  or . The code to make a table looks like this:  | Left align | Right align | Center align | |:-----------|------------:|:------------:| | This       |        This |     This     | | column     |      column |    column    | | will       |        will |     will     | | be         |          be |      be      | | left       |       right |    center    | | aligned    |     aligned |   aligned    |   And the result is:   This is much different than , which says that Jeff doesn't want the &lt;tr&gt;&lt;td&gt; tags allowed on the SE sites. This request has a specific feature request, as opposed to the other questions which don't really have a decisive yes/no answer.  Here are some specific posts that need this type of support:
76248
How can I use the &lt;label&gt; tag within an ASP.NET application? I want it to be valid, accessible, and usable.  I understand the optimal HTML way is this:  &lt;label for="Username"&gt;Username:&lt;/label&gt; &lt;input type="text" id="Username" runat="server" /&gt;   But if the above code is in an ASP.NET user control, the input ID will change, meaning the label's "for" attribute is useless. I could make the label tag a server control and set its "for" attribute in the code (Username.ClientID), but it seems like a lot of work for such a simple thing.  I've also seen this HTML used in the past:  &lt;label&gt;     &lt;span&gt;Username&lt;/span&gt;     &lt;input type="text" id="Username" runat="server" /&gt; &lt;/label&gt;   What is the proper approach?
7038
Here's the information :     There are four different pairs of   opening and closing tags which can be   used in PHP. Two of those, &lt;?php ?&gt;   and &lt;script language="php"&gt; &lt;/script&gt;,   are always available. The other two   are short tags and ASP style tags, and   can be turned on and off from the   php.ini configuration file. As such,   while some people find short tags and   ASP style tags convenient, they are   less portable, and generally not   recommended.   In my experience most servers do have short tags enabled. Typing  &lt;?=   is far more convenient than typing  &lt;?php echo    The programmers convenience is an important factor, so why are they not recommended?
114342
I have a sketch that I want to put up on my website, and I also intend to write a short play at some point which I'd also want to make freely available.  I'm trying to work out the best way of representing this in HTML. I basically need two columns - one for the character speaking, and one for the text. Each speech obviously needs to line up with the speaker though. In other words, something like this:       Jeff        This sure is a nice website we've got now.      Joel        It certainly is. By the way, working at FogCreek rocks.      Jeff        Of course it does. Have you played Rock Band yet? It's                  a lot of fun.   (Well it's better than lorem ipsum...)  I know how I could do this with HTML tables (with one table row per speech) but that seems pretty ugly, and everyone certainly seems to be keen on using CSS to represent non-tabular data. I can't see how this really counts a tabular data - my use of "row" and "column" earlier was to do with the layout rather than the fundamental data.  So, any ideas? I think most of the script websites I've seen (not many, admittedly) either use &lt;pre&gt; like my example above, or don't bother trying to keep the normal script format, instead just prefixing each paragraph with the speaker's name. (See the podcast wiki for an example of this style.) I'm having trouble working out even what HTML elements I should be using to represent this, frankly - a dictionary definition list with the speaker as the term and the speech as the definition is probably the closest I've thought of, but that feels like abuse.
6047
I'm interested in learning about some nice-looking table samples. Colors can make a huge difference, and just providing some color to headers, background, or borders can dramatically change presentation. Any samples you're proud to share?  (BTW here's a sample I like, but unfortunately, not TeX...)
43240
This question is a follow up to my :  Is it possible to use &gt; and &lt; to pipe opening and closing braces on each side of a cell's content? To be more specific, what I want is to define the following column:  \newcolumntype{P}{&gt;{\leavevmode\kern-\tabcolsep\bfseries\parbox[t]{\hsize}{}X&lt;{}}}   I want a column type that automatically embraces the cell content in a \parbox.  I enclose a short MNWE:  \documentclass[table]{article} \usepackage{lmodern, microtype, xcolor, tabularx, tabulary}  \begin{document}  \begin{tabularx}{0.5\columnwidth}{&gt;{\raggedright\arraybackslash\leavevmode\kern-\tabcolsep\parbox[t]{\hsize}{ }X&lt;{}}XX&lt;{\leavevmode\kern-\tabcolsep\raggedleft\arraybackslash}}  \rowcolor{lightgray}All this testing is not so funny&amp;test&amp;test\\\hline testing, testing and even more testing &amp;test&amp;test\\ \rowcolor{lightgray}I want to write a noce table in a simple way&amp;test&amp;test\\ \end{tabularx}  \end{document}
34851
You find plenty of tutorials on menu bars in HTML, but for this specific (though IMHO generic) case, I haven't found any decent solution:  #  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  # #  ^                                                                             ^  #    There's an varying number of text-only menu items and the page layout is fluid. The first menu item should be left-aligned, the last menu item should be right-aligned. The remaining items should be spread optimally on the menu bar. The number is varying,so there's no chance to pre-calculate the optimal widths.   Note that a TABLE won't work here as well:   If you center all TDs, the first and the last item aren’t aligned correctly. If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.   Isn’t it strange that there is no obvious way to implement this in a clean way by using HTML and CSS?
25980
suggested to have templates for tags. Their example was with the  tag on Stack Overflow.  I'm suggesting a more general approach:  Templates, Mark II  I suggest that each site will have a template. That template will prefill the  textbox when a new question is asked. However, it will be completely optional.  Something like (for Stack Overflow):  ## The Problem ## { Please tell us what the problem is with as many details as possible.   Include language, operating system, and any other relevant information.   Remember to add the relevant tags below, too. } ## Attempted Solutions ## { Please tell us what you've tried so far. Have you tried searching Google?    What queries? } ## Existing Code ## { Do you have any existing code to show? Please keep it short and simple.    We should be able to detect the problem right away. }   Why am I suggesting this?  Well, it seems as though most users will stick with the default. They don't bother to read, and so prefilling the question form for them with information that we know might be relevant, will forceWe'll get to that in a second them to actually stop and read.  Scenarios:   Best case: User arrives to ask a question, actually reads the template, fills the correct information in the placeholders. (Yeah, because that'll happen a lot) Neutral: User simply removes all of the template text and rewrites their own question. Result is exact same as we have currently. Worst case: User will ignore or misunderstand the template, will use it wrong or not at all and we'll get something like  &lt;template text here, still unfilled&gt; &lt;(crappy) question&gt;   This can be solved in a couple different ways. We could detect the template tags (i.e. { }, subject to discussion), and throw an error when a user attempts to post with them still available. We could also act more autonomously and remove placeholders which still exist.    Some more points:   Templates should be per-site, not per-tag. Sure, there are differences between the tags, but all questions are expected to have the same general information, and this isn't meant to be a rule, but a guideline to help write better questions. Site templates should be editable by that site's mods, like close reasons. We could autofocus on the first placeholder, and perhaps implement TAB to jump from one placeholder to the other, similar to mixins in IDEs. This doesn't have to be implemented everywhere. This suggestion makes sense to Stack Overflow or Superuser, but not to Anime &amp; Manga or Gaming All of the details are subject to discussion, and all discussion is welcomed.
8990
I would like to ask for some simple examples showing the uses of &lt;div&gt; and &lt;span&gt;.   I've seen them both used to mark a section of a page with an id or class, but I'm interested in knowing if there are times when one is preferred over the other.
104769
I'm not sure why I need to use ul-li vs simply using divs when listing items. I can make both look exactly the same so where is the functional advantage to creating an unordered list vs lining up divs?
73184
I can't figure out how to achieve the following layout with CSS (probably because I don't actually know CSS).  I have a bunch of divs like this:  &lt;div class="right"&gt; &lt;p&gt;1&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;2&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;3&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;4&lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt;5&lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt;6&lt;/p&gt; &lt;/div&gt;   (not the real contents)  Now I want the layout to look like two equal columns of divs, with the "right" ones on the right, and the "left" ones on the left, thus:  2 1 3 5 4 6   [Edit: In a previous version of this question I had textareas inside the divs, and the divs all had different names like "one" and "xyz".] I tried something like  div.right { width:50%; float:right; clear:right; } div.left { width:50%; float:left; clear:left;}   but it doesn't quite work: It produces something like:  2 1 3  4 5   6   (without the "clear"s, it blithely produces   2 1 3 4 6 5   which is not what is wanted).  It is apparent that it can be made to work if the divs are ordered differently, but I'd like not to do that (because these divs are generated dynamically if the browser has Javascript, and I don't want to change the actual order that is displayed in the absence of Javascript, for semantic reasons). Is it still possible to achieve the layout I want?  [For what it's worth, I'm willing to have it not work on IE or older versions of other browsers, so if there is a solution that works only on standards-compliant browsers, that's okay :-)]
46801
I searched a bit, but I could not find a reliable way to wrap text in tables with columns spanning more than one row. Any ideas on how to fit this table in the page?:  \documentclass[12pt,a4paper]{article} \usepackage{booktabs} \usepackage{multirow}  \begin{document}     \begin{tabular}{cccc}     \toprule     &amp; &amp; \multicolumn{2}{c}{Logic of rule adoption} \\     \cmidrule{3-4}        &amp; &amp; Logic of consequences &amp; Logic of appropriateness \\     \midrule     \multirow{2}{*}{Principal actor in rule adoption process} &amp; EU-driven &amp; External incentives model &amp; Social learning model \\       &amp; CEE-driven &amp; Lesson-drawing model &amp; Lesson-drawing model \\     \bottomrule     \end{tabular}  \end{document}
57120
I'm trying to create a table which looks like    but I'm not really sure how to incorporate multiple spanning rows and columns together (to add 'Organism 1' and 'Organism 2'). I've gotten to this point so far:   \documentclass[a4paper,10pt]{article} \usepackage[utf8x]{inputenc} \usepackage{amsmath}  \begin{document} \begin{tabular}{r|c|c|} \multicolumn{1}{r}{}  &  \multicolumn{1}{c}{$S$}  & \multicolumn{1}{c}{$T$} \\cline{2-3} $S$ & $a,a$ & $b,c$ \\cline{2-3} $T$ & $c,b$ & $d,d$ \\cline{2-3} \end{tabular}  \end{document}    And it currently looks like this:    Can anyone suggest how to add the top 'Organism 2' and left 'Organism 1' row/column entries?  thanks!