How to create the below Appointment table in Salesforce?

VF page:

<apex:page controller="Account_Filter" docType="html-5.0">
<apex:form >
<apex:pageBlock >

<!--Search and filter button-->
<apex:pageBlockButtons location="top">
<apex:commandButton value="Search" action="{!searchaccounts}" />
<apex:commandButton value="Show Selected Accounts" action="{!processSelected}" />
</apex:pageBlockButtons>

<!--Input Account's fields to query records-->
<apex:pageBlockSection id="Account-table" columns="2">
<apex:pageBlockSectionItem >
<apex:outputLabel value="Name" />
<apex:inputText value="{!name}" />
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >
<apex:outputLabel value="phone" />
<apex:inputText value="{!phone}" />
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >
<apex:outputLabel value="Check_Active" />
<apex:inputCheckbox value="{!Active}" />
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >
<apex:outputLabel value="SLAExpirationDate__c" />
<apex:input value="{!SLAExpirationDate}" type="date"/>
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >
<apex:outputLabel value="BillingPostalCode" />
<apex:inputText value="{!BillingPostalCode}" />
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >
<apex:outputLabel value="End_date" />
<apex:input value="{!End_Date}" type="date"/>
</apex:pageBlockSectionItem>

</apex:pageBlockSection>
</apex:pageBlock>
<!--Display all related Account records-->

<apex:pageBlock >
<apex:pageBlockTable value="{!wrapClassList}" var="accWrap" id="table" title="All Accounts" >
<apex:column >
<apex:inputCheckbox value="{!accWrap.flag}" />
</apex:column>
<apex:column value="{!accWrap.conWrap.Name}" />
<apex:column value="{!accWrap.conWrap.SLAExpirationDate__c}" />
<apex:column value="{!accWrap.conWrap.check_active__c}" />
<apex:column value="{!accWrap.conWrap.BillingPostalCode}" />
<apex:column value="{!accWrap.conWrap.phone}" />
</apex:pageBlockTable>
<!--Display selected Account records-->
<apex:pageBlockTable value="{!selected_accounts}" var="accWrapab" title="All Accounts">
<apex:column value="{!accWrapab.Name}" />
<apex:column value="{!accWrapab.SLAExpirationDate__c}" />
<apex:column value="{!accWrapab.check_active__c}" />
<apex:column value="{!accWrapab.phone}" />
<apex:column value="{!accWrapab.BillingPostalCode}" />
</apex:pageBlockTable>

</apex:pageBlock>

</apex:form>
</apex:page>

Controller:

public with sharing class Account_Filter
{
public List<wrapperClass> wrapClassList{get;set;}
public List<Account> Accounts { get; set; }
public String name { get; set; }
public Date SLAExpirationDate { get; set; }
public String BillingPostalCode { get; set; }
public Date End_Date { get; set; }
public string phone { get; set; }
public wrapperClass wc{get;set;}
public boolean Active{get;set;}
public List<Account> selected_accounts{get;set;}
public Account_Filter()
{
Accounts = new List<Account>();
}

public void searchaccounts()
{
selected_accounts = new List<Account>();

integer i=0;

If(!Accounts.isEmpty()){
Accounts.clear();
i=0;
}
If(!selected_accounts.isEmpty()){
selected_accounts.clear();

}
wrapClassList = new List<wrapperClass>();

string st='%'+name+'%';
string queryy='select name,phone,check_active__c,CreatedDate,BillingPostalCode,SLAExpirationDate__c from Account where';

if(!String.isBlank(name)){
i=1;
queryy=queryy+' Name LIKE : st AND';
}
if(Active==true){
i=1;
queryy=queryy+' check_active__c =: Active AND';
}
if(!String.isBlank(phone)){
i=1;
queryy=queryy+' Phone =: phone AND';
}
if(!String.isBlank(BillingPostalCode)){
i=1;
queryy=queryy+' BillingPostalCode =: BillingPostalCode AND';
}

if(SLAExpirationDate != NULL && End_Date == NULL){
queryy=queryy+' SLAExpirationDate__c >=: SLAExpirationDate AND';
i=1;
}
if(SLAExpirationDate == NULL && End_Date != NULL){
queryy=queryy+' SLAExpirationDate__c <: End_Date AND';
i=1;
}
if(SLAExpirationDate != NULL && End_Date != NULL){
queryy=queryy+' SLAExpirationDate__c <: End_Date AND SLAExpirationDate__c >=: SLAExpirationDate AND';
i=1;
}
string queryya=queryy.removeEndIgnoreCase('AND');
if(i==1){
Accounts=Database.query(queryya);
}

For(Account co : Accounts){
wc = new wrapperClass();
wc.flag = false;
wc.conWrap = co;
wrapClassList.add(wc);
}
}
public class wrapperClass{
public boolean flag{get;set;}
public Account conWrap{get;set;}

}
public void processSelected() {
selected_accounts = new List<Account>();
If(!selected_accounts.isEmpty()){
selected_accounts.clear();

}

for(wrapperClass wrapAccountObj : this.wrapClassList) {
if(wrapAccountObj.flag == true) {
selected_accounts.add(wrapAccountObj.conWrap);
}
}
}

}