Tables
Styled and interactive tables.
Table #1 #
Family Physician
Dr. Jhon Lin
Md
|
Moutain View, CA | |
Dentist
Dr.
Matthew Huff DDS
|
Chicago | |
Pediatrician
Dr.
Santosh Gard MD
|
Copenhagen | |
Obstetriccian &
Gynecologist
Dr.
Dirk Peterson MD
|
London, UK | |
Optometrist
Dr.
Hilary Loshand MD
|
Philadenphia, PA |
<div class="table-responsive">
<table class="table table-hover listing-table">
<tbody>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img src="../images/listing/health-and-medical-provider-1.jpg" alt="Provider 1">
</a>
<div class="media-body">
<div class="text-dark font-size-sm">Family Physician
</div>
<a class="font-weight-semibold text-link d-block font-size-md name"
href="../listing-details-no-image.html">Dr. Jhon Lin
Md</a>
</div>
</div>
</td>
<td><span class="text-gray">Moutain View, CA</span></td>
<td>
<div class="author-rate">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="d-inline-block ml-3">(25 Reviews)</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img src="../images/listing/health-and-medical-provider-2.jpg" alt="Provider 2">
</a>
<div class="media-body">
<div class="text-dark font-size-sm">Dentist</div>
<a class="font-weight-semibold text-link d-block font-size-md name"
href="../listing-details-no-image.html">Dr.
Matthew Huff DDS</a>
</div>
</div>
</td>
<td><span class="text-gray">Chicago</span></td>
<td>
<div class="author-rate">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="d-inline-block ml-3">(22 Reviews)</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img src="../images/listing/health-and-medical-provider-3.jpg" alt="Provider 3">
</a>
<div class="media-body">
<span class="text-dark">Pediatrician</span>
<a class="font-weight-semibold text-link d-block font-size-md name"
href="../listing-details-no-image.html">Dr.
Santosh Gard MD</a>
</div>
</div>
</td>
<td><span class="text-gray">Copenhagen</span></td>
<td>
<div class="author-rate">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="d-inline-block ml-3">(28 Reviews)</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img src="../images/listing/health-and-medical-provider-4.jpg" alt="Provider 1">
</a>
<div class="media-body">
<div class="text-dark font-size-sm">Obstetriccian &
Gynecologist
</div>
<a class="font-weight-semibold text-link d-block font-size-md name"
href="../listing-details-no-image.html">Dr.
Dirk Peterson MD</a>
</div>
</div>
</td>
<td><span class="text-gray">London, UK</span></td>
<td>
<div class="author-rate">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="d-inline-block ml-3">(17 Reviews)</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="mr-3 image">
<img src="../images/listing/health-and-medical-provider-5.jpg" alt="Provider 1">
</a>
<div class="media-body">
<span class="text-dark">Optometrist</span>
<a class="font-weight-semibold text-link d-block font-size-md name"
href="../listing-details-no-image.html">Dr.
Hilary Loshand MD</a>
</div>
</div>
</td>
<td><span class="text-gray">Philadenphia, PA</span></td>
<td>
<div class="author-rate">
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item checked">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="rate-item">
<svg class="icon icon-ionicons_svg_md-star"><use
xlink:href="#icon-ionicons_svg_md-star"></use></svg>
</span>
<span class="d-inline-block ml-3">(19 Reviews)</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>Table #2 #
MEE Studio
3D Animation
Designer
|
Moutain View, CA |
Freelancer
|
Wave Agency
Account
Executive
|
Chicago |
Part Time
|
ABA Logistic JSC
Transport
Shift Controller
|
Copenhagen |
Temporary
|
Arates Property Co
Intership
Property Sale
|
London, UK |
Intership
|
Roihalatan LLC
UI/UX
Product Designer
|
Anywhere |
Remote
|
BeatsLabs Co
WordPress
Front-End Developer
|
Ukraine |
Full Time
|
Sun Travel Co
Travel
Sale Consultant
|
Berlin, Germany |
Full Time
|
<div class="table-responsive">
<table class="table listing-table listing-table-job table-hover">
<tbody>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img
src="../images/listing/top-job-1.jpg"
alt="Top job 1">
</a>
<div class="media-body lh-14">
<div class="text-gray lh-14">MEE Studio</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">3D Animation
Designer</a>
</div>
</div>
</td>
<td><span class="text-secondary">Moutain View, CA</span></td>
<td>
<div class="d-flex">
<span class="text-link">Freelancer</span>
<span class="text-danger ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img
src="../images/listing/top-job-2.jpg"
alt="Top job 2">
</a>
<div class="media-body lh-14">
<div class="text-gray ">Wave Agency</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Account
Executive</a>
</div>
</div>
</td>
<td><span class="text-secondary">Chicago</span></td>
<td>
<div class="d-flex">
<span class="text-link">Part Time</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img
src="../images/listing/top-job-3.jpg"
alt="Top job 3">
</a>
<div class="media-body lh-14">
<div class="text-gray ">ABA Logistic JSC</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Transport
Shift Controller</a>
</div>
</div>
</td>
<td><span class="text-secondary">Copenhagen</span></td>
<td>
<div class="d-flex">
<span class="text-link">Temporary</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img
src="../images/listing/top-job-4.jpg"
alt="Top job 4">
</a>
<div class="media-body lh-14">
<div class="text-gray ">Arates Property Co
</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Intership
Property Sale</a>
</div>
</div>
</td>
<td><span class="text-secondary">London, UK</span></td>
<td>
<div class="d-flex">
<span class="text-link">Intership</span>
<span class="text-darker-light ml-auto"><i class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img
src="../images/listing/top-job-5.jpg"
alt="Top job 5">
</a>
<div class="media-body lh-14">
<div class="text-gray ">Roihalatan LLC</div>
<a href="../listing-details-gallery.html"
class="font-size-md font-weight-semibold text-dark">UI/UX
Product Designer</a>
</div>
</div>
</td>
<td><span class="text-secondary">Anywhere</span></td>
<td>
<div class="d-flex">
<span class="text-link">Remote</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img
src="../images/listing/top-job-6.jpg"
alt="Top job 6">
</a>
<div class="media-body lh-14">
<div class="text-gray ">BeatsLabs Co</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">WordPress
Front-End Developer</a>
</div>
</div>
</td>
<td><span class="text-secondary">Ukraine</span></td>
<td>
<div class="d-flex">
<span class="text-link">Full Time</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media align-items-center">
<a href="#" class="image mr-3">
<img
src="../images/listing/top-job-7.jpg"
alt="Top job 7">
</a>
<div class="media-body lh-14">
<div class="text-gray ">Sun Travel Co</div>
<a class="font-size-md font-weight-semibold text-dark"
href="../listing-details-gallery.html">Travel
Sale Consultant</a>
</div>
</div>
</td>
<td><span class="text-secondary">Berlin, Germany</span></td>
<td>
<div class="d-flex">
<span class="text-link">Full Time</span>
<span class="text-darker-light ml-auto"><i
class="fas fa-heart"></i> </span>
</div>
</td>
</tr>
</tbody>
</table>
</div>