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

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%;
}

}

Select all 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>

Select all Open in new window

Working sample here