How can I display custom object records into HTML table on visualforce page

Question

I have to display records from a custom object into an HTML table on button click. I tried to convert it into apex pageblock table but it's not working and records will be generated based on some criteria.

Here is the VF page:

<apex:commandButton styleClass="btn btn-primary btn-lg finish-step" action="{!display}" onclick="findAllData();return show('newStep-6','newStep-5');" value="GetRate"/>               
  <table class="table">
<!--<apex:pageBlock >-->
<!--<apex:pageblockTable styleclass="table" value="{!lender}" var="m">-->
    <thead>
      <tr>
        <th width="25%">Lender 
          <span class="short-icon"><a href="#"><apex:image url="{!URLFOR($Resource.rateCountResource1, '/rateCount/assets/images/short-icon.png')}"/></a></span>
        </th>
        <th width="25%">Rate
          <span class="short-icon"><a href="#"><apex:image url="{!URLFOR($Resource.rateCountResource1, '/rateCount/assets/images/short-icon.png')}"/></a></span>
        </th>
        <th width="25%">Payment
          <span class="short-icon"><a href="#"><apex:image url="{!URLFOR($Resource.rateCountResource1, '/rateCount/assets/images/short-icon.png')}"/></a></span>
        </th>
        <th width="25%">&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <apex:repeat value="{!lender}" var="m">
      <tr>
        <td class="comp"><a href="#"><apex:image url="{!URLFOR($Resource.rateCountResource1, '/rateCount/assets/images/clogo/1.jpg')}"/></a>
          <div class="info">
            <span class="review">
              <i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i style="color:#e3dfd9" class="glyphicon glyphicon-star"></i> (230)
            </span>
            <span class="lender-info"><a href="#">Lender info</a></span>
          </div>
        </td>
        <td>
          <div class="price">
            <small>20 year fixed</small>
            <!--<h1>3.250% <small>APR</small></h1>-->

            <h1>{!m.Rate__c}<small>APR</small></h1>
            <small>3.250% Rate | At 0 pts</small>
          </div>
        </td>
        <td>
          <div class="price">
            <small>$0.00 fees</small>
            <h1>${!m.Payment__c} <small>/mo</small></h1>
            <small>As of 08/02</small>
          </div>
        </td>
        <td><button type="button" class="btn btn-primary btn-lg">Select</button></td>
      </tr>
      </apex:repeat>
    </tbody>
  </table>
<!--</apex:pageblockTable>-->
<!--</apex:pageBlock>-->

And extension code:

global with sharing class RateExtentions {
    public ApexPages.StandardController controller;
    public List<Lender__c> lender{get;set;} 

    public RateExtentions(){

    }
    public RateExtentions(ApexPages.StandardController controller) {
        this.controller = controller;
        lender = new List<Lender__c>();
    }

    //VF method to display lender records according to selected criteria
    public void display(){
        lender = [Select id,Name,Rate__c,Property_Type__c,Occupancy_Type__c From Lender__c where Occupancy_Type__c = 'primary' and Rate__c = 3.414];
        System.debug('lender info::'+lender);
    }
}

Expected output: