Creating tables in Visual Studio 2013

Question

I am trying to create tables using the div tag in Visual Studio 2013 but the problem is that in design view I keep having the columns underneath each other instead of being on the same row.

Here is my code:

            <div id="TM">
               <div class="row" style="background-color:orange">
                   <div class="col-md-2" style="background-color:blueviolet">
                      <label>Supplier</label>
                   </div>

                   <div class="col-md-2" style="background-color:pink" role="textbox"></div>
                   <div class="col-md-3" style="background-color:blueviolet">
                      <label>Estimated Budget</label>
                   </div>
                   <div class="col-md-2" style="background-color:pink">
                      <div class="Textbox" style="height:20px; width:50px" role="textbox"></div>
              </div>                            
           </div>

Answer 1

You might want to have a look at this http://www.w3schools.com/html/html_layout.asp in order to display div as if they are a tablet you have to get the structure of your html and css correct, with float lefts in the correct position. Given your code above, the below should work. Note in production code you really should re-factor the "Style" elements into a CSS stylesheet as much as is possible.

    <div id="TM">
           <div class="row" style="background-color:orange">
               <div class="col-md-2" style="background-color:blueviolet; float:left;">
                  <label>Supplier</label>
               </div>

               <div class="col-md-2" style="background-color:pink; float:left;" role="textbox"></div>
               <div class="col-md-3" style="background-color:blueviolet; float:left;">
                  <label>Estimated Budget</label>
               </div>
               <div class="col-md-2" style="background-color:pink; float:left;">
               <div class="Textbox" style="height:20px; width:50px; float:left;" role="textbox"></div>
          </div>
       </div>

Answer 2

Why exactly you want to force divs to display tabular data? It's a very bad practice and you really shouldn't do that. Don't underestimate semantics. Every time you have a tabular data, you should use <table> .

Tag <table> should be avoided only when you use it for defining website layout, because it leads to problematic scenarios and a really clunky design. In a scenario like this however, when you obviously use tabular data and try to reinvent the wheel by forcing divs to do table design, <table> is a really way to go.

Few more notes:

• wysiwyg editor in Visual studio is suitable really just for fast prototyping, but shouldn't be used for actual laying out the web application. Write the html by hand
• try to avoid inline styles. use external css files whenever possible, unless you want to run into numerous problems in the future. Your current code will be a nightmare to maintain..