How can I modify this to become a 5 column page layout instead of two?

One more question experts,

The following code gives me a two column page layout.

However, I would like to modify the code to display 5 columns.

Any ideas?

    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form>
 <fieldset><legend>XPHIAS SERMON NOTE SYSTEM - MANAGE CLIENTS</legend>
<table style="margin-top:50px;width:816px">
    <tr>
        <td>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Date</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                  <input  class="form-control" name="DateText" Readonly="true"" style="width:150px;background:lightgrey;"/>
                </div>
            </div>
        </div>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Name</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input  class="form-control" name="Name" placeholder="Enter your name..." tabindex="1"" style="width:150px;"/>
                </div>
            </div>
        </div>

		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Department</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
                    <asp:DropDownList name="Department" data-placeholder="Please select a department..." class="chosen-select form-control" style="width:150px;" tabindex="2"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>

       		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Location</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-tent"></i></span>
                    <asp:DropDownList name="Location" data-placeholder="Please select a location..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
   		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Floor</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                    <asp:DropDownList name="Floor" data-placeholder="Please select a floor..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
        </td>
        <td>
            <br />
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Phone</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
				 <input class="form-control" " name="phone" style="width:150px;" tabindex="7" name="Phone" placeholder="Enter phone number..." />

				</div>
			</div>
		</div>
     </td>
    </tr>
</table>
</form>

Open in new window


Thanks a lot
LVL 29
sammySeltzerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Add 3 more td elements in the table:
HTML:
   <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form>
  <fieldset><legend>XPHIAS SERMON NOTE SYSTEM - MANAGE CLIENTS</legend></fieldset>
  <table style="margin-top:50px;width:816px">
    <tr>
      <td>
        <div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Date</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                  <input  class="form-control" name="DateText" Readonly="true"" style="width:150px;background:lightgrey;"/>
                </div>
            </div>
        </div>
      </td>
      <td>
          <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Name</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input  class="form-control" name="Name" placeholder="Enter your name..." tabindex="1"" style="width:150px;"/>
                </div>
            </div>
        </div>

		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Department</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
                    <asp:DropDownList name="Department" data-placeholder="Please select a department..." class="chosen-select form-control" style="width:150px;" tabindex="2"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
      </td>
      <td>
          <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Location</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-tent"></i></span>
                    <asp:DropDownList name="Location" data-placeholder="Please select a location..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
   		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Floor</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                    <asp:DropDownList name="Floor" data-placeholder="Please select a floor..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>

      </td>
      <td>
        <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
		<div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
      </td>
      <td>
        
        <div class="form-group" style="margin-left:50px;">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Phone</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
				 <input class="form-control" " name="phone" style="width:150px;" tabindex="7" name="Phone" placeholder="Enter phone number..." />

				</div>
			</div>
		</div>
      </td>
    </tr>    
  </table>
  </form>

Open in new window

0
Julian HansenCommented:
This is just a suggestion but best practice with respect to layout is to refrain from using tables unless it is specifically for representing data.
There are a number of very good reasons why tables should not be used for layout - the most compelling is that it breaks responsiveness of the page - the ability of the page to adapt sensibly to different screen sizes.

You appear to already be using bootstrap so you should be expanding on that. Bootstrap is based on a 12 column layout however it is fairly simple to create a bootstrap addon that caters to 5 columns - you can read how to do this in the following article https://www.experts-exchange.com/articles/28663/Create-N-column-layout-for-Bootstrap.html

The sample below includes a full Bootstrap 5 column extension source which I have also provided  here
.col-xs-5-1,.col-sm-5-1,.col-md-5-1,.col-lg-5-1, .col-xs-5-2,.col-sm-5-2,.col-md-5-2,.col-lg-5-2, .col-xs-5-3,.col-sm-5-3,.col-md-5-3,.col-lg-5-3, .col-xs-5-4,.col-sm-5-4,.col-md-5-4,.col-lg-5-4, .col-xs-5-5,.col-sm-5-5,.col-md-5-5,.col-lg-5-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-5-1, .col-xs-5-2, .col-xs-5-3, .col-xs-5-4, .col-xs-5-5 {
  float: left;
}
.col-xs-5-5 {
  width: 100%;
}
.col-xs-pull-5-5 {
	right: 100%;
}
.col-xs-push-5-5 {
  left: 100%;
}
.col-xs-offset-5-5 {
  margin-left: 100%;
}
.col-xs-5-4 {
  width: 80%;
}
.col-xs-pull-5-4 {
	right: 80%;
}
.col-xs-push-5-4 {
  left: 80%;
}
.col-xs-offset-5-4 {
  margin-left: 80%;
}
.col-xs-5-3 {
  width: 60%;
}
.col-xs-pull-5-3 {
	right: 60%;
}
.col-xs-push-5-3 {
  left: 60%;
}
.col-xs-offset-5-3 {
  margin-left: 60%;
}
.col-xs-5-2 {
  width: 40%;
}
.col-xs-pull-5-2 {
	right: 40%;
}
.col-xs-push-5-2 {
  left: 40%;
}
.col-xs-offset-5-2 {
  margin-left: 40%;
}
.col-xs-5-1 {
  width: 20%;
}
.col-xs-pull-5-1 {
	right: 20%;
}
.col-xs-push-5-1 {
  left: 20%;
}
.col-xs-offset-5-1 {
  margin-left: 20%;
}
@media (min-width: 768px) {
	.col-sm-5-1, .col-sm-5-2, .col-sm-5-3, .col-sm-5-4, .col-sm-5-5 {
  float: left;
}
.col-sm-5-5 {
  width: 100%;
}
.col-sm-pull-5-5 {
	right: 100%;
}
.col-sm-push-5-5 {
  left: 100%;
}
.col-sm-offset-5-5 {
  margin-left: 100%;
}
.col-sm-5-4 {
  width: 80%;
}
.col-sm-pull-5-4 {
	right: 80%;
}
.col-sm-push-5-4 {
  left: 80%;
}
.col-sm-offset-5-4 {
  margin-left: 80%;
}
.col-sm-5-3 {
  width: 60%;
}
.col-sm-pull-5-3 {
	right: 60%;
}
.col-sm-push-5-3 {
  left: 60%;
}
.col-sm-offset-5-3 {
  margin-left: 60%;
}
.col-sm-5-2 {
  width: 40%;
}
.col-sm-pull-5-2 {
	right: 40%;
}
.col-sm-push-5-2 {
  left: 40%;
}
.col-sm-offset-5-2 {
  margin-left: 40%;
}
.col-sm-5-1 {
  width: 20%;
}
.col-sm-pull-5-1 {
	right: 20%;
}
.col-sm-push-5-1 {
  left: 20%;
}
.col-sm-offset-5-1 {
  margin-left: 20%;
}

}
@media (min-width: 992px) {
.col-md-5-1, .col-md-5-2, .col-md-5-3, .col-md-5-4, .col-md-5-5 {
  float: left;
}
.col-md-5-5 {
  width: 100%;
}
.col-md-pull-5-5 {
	right: 100%;
}
.col-md-push-5-5 {
  left: 100%;
}
.col-md-offset-5-5 {
  margin-left: 100%;
}
.col-md-5-4 {
  width: 80%;
}
.col-md-pull-5-4 {
	right: 80%;
}
.col-md-push-5-4 {
  left: 80%;
}
.col-md-offset-5-4 {
  margin-left: 80%;
}
.col-md-5-3 {
  width: 60%;
}
.col-md-pull-5-3 {
	right: 60%;
}
.col-md-push-5-3 {
  left: 60%;
}
.col-md-offset-5-3 {
  margin-left: 60%;
}
.col-md-5-2 {
  width: 40%;
}
.col-md-pull-5-2 {
	right: 40%;
}
.col-md-push-5-2 {
  left: 40%;
}
.col-md-offset-5-2 {
  margin-left: 40%;
}
.col-md-5-1 {
  width: 20%;
}
.col-md-pull-5-1 {
	right: 20%;
}
.col-md-push-5-1 {
  left: 20%;
}
.col-md-offset-5-1 {
  margin-left: 20%;
}

}
@media (min-width: 1200px) {
	.col-lg-5-1, .col-lg-5-2, .col-lg-5-3, .col-lg-5-4, .col-lg-5-5 {
  float: left;
}
.col-lg-5-5 {
  width: 100%;
}
.col-lg-pull-5-5 {
	right: 100%;
}
.col-lg-push-5-5 {
  left: 100%;
}
.col-lg-offset-5-5 {
  margin-left: 100%;
}
.col-lg-5-4 {
  width: 80%;
}
.col-lg-pull-5-4 {
	right: 80%;
}
.col-lg-push-5-4 {
  left: 80%;
}
.col-lg-offset-5-4 {
  margin-left: 80%;
}
.col-lg-5-3 {
  width: 60%;
}
.col-lg-pull-5-3 {
	right: 60%;
}
.col-lg-push-5-3 {
  left: 60%;
}
.col-lg-offset-5-3 {
  margin-left: 60%;
}
.col-lg-5-2 {
  width: 40%;
}
.col-lg-pull-5-2 {
	right: 40%;
}
.col-lg-push-5-2 {
  left: 40%;
}
.col-lg-offset-5-2 {
  margin-left: 40%;
}
.col-lg-5-1 {
  width: 20%;
}
.col-lg-pull-5-1 {
	right: 20%;
}
.col-lg-push-5-1 {
  left: 20%;
}
.col-lg-offset-5-1 {
  margin-left: 20%;
}

}

Open in new window


I have taken your code - removed the table and applied the columns to make it 5 columns
<form>
 <fieldset><legend>XPHIAS SERMON NOTE SYSTEM - MANAGE CLIENTS</legend>
   <div class="row">
      <div class="col-md-5-1">
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Date</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                  <input  class="form-control" name="DateText" Readonly="true" style="width:150px;background:lightgrey;"/>
                </div>
            </div>
        </div>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
	  </div>
      <div class="col-md-5-1">
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Name</label>
			<div class="controls">
			    <div class="input-group">
				 <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input  class="form-control" name="Name" placeholder="Enter your name..." tabindex="1" style="width:150px;"/>
                </div>
            </div>
        </div>
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Phone</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
				 <input class="form-control" " name="phone" style="width:150px;" tabindex="7" name="Phone" placeholder="Enter phone number..." />

				</div>
			</div>
		</div>
	  </div>
      <div class="col-md-5-1">
		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Department</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span>
                    <asp:DropDownList name="Department" data-placeholder="Please select a department..." class="chosen-select form-control" style="width:150px;" tabindex="2"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
	  </div>
      <div class="col-md-5-1">
   		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Location</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-tent"></i></span>
                    <asp:DropDownList name="Location" data-placeholder="Please select a location..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
	  </div>
      <div class="col-md-5-1">
   		<div class="form-group">
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Floor</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
                    <asp:DropDownList name="Floor" data-placeholder="Please select a floor..." class="chosen-select form-control" style="width:150px;" tabindex="3"" AppendDataBoundItems="True" Width="100px" Enabled="True">
                    <asp:ListItem value="">&nbsp;</asp:ListItem>
                    </asp:DropDownList>
				</div>
			</div>
		</div>
    </div>
     <div class="col-md-5-1">
		<div class="form-group" >
	        <label class="control-label" style="color:#3b3b3b;font-weight:bold;font-size:medium">Email Address</label>
			<div class="controls">
			    <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
				 <input class="form-control" " name="Email" style="width:150px;" tabindex="6" name="Email" placeholder="Enter email address..." />
				</div>
    		</div>
		</div>
     </div>
   </div>
</form>

Open in new window


Working sample here
2

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sammySeltzerAuthor Commented:
I thought I closed this question and awarded the points.

My sincere apology.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.