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>

Select all Open in new window

Thanks a lot