Our Django Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers. Keep reading some Django Tables examples to see how these tables work.
Examples
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
<div class= "table-responsive" >
<div>
<table class= "table align-items-center" >
<thead class= "thead-light" >
<tr>
<th scope= "col" class= "sort" data-sort= "name" > Project</th>
<th scope= "col" class= "sort" data-sort= "budget" > Budget</th>
<th scope= "col" class= "sort" data-sort= "status" > Status</th>
<th scope= "col" > Users</th>
<th scope= "col" class= "sort" data-sort= "completion" > Completion</th>
<th scope= "col" ></th>
</tr>
</thead>
<tbody class= "list" >
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Argon Design System</span>
</div>
</div>
</th>
<td class= "budget" >
$2500 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-warning" ></i>
<span class= "status" > pending</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 60%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$1800 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Black Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$3150 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-danger" ></i>
<span class= "status" > delayed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 72%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "72" aria-valuemin= "0" aria-valuemax= "100" style= "width: 72%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > React Material Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$4400 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-info" ></i>
<span class= "status" > on schedule</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 90%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" aria-valuenow= "90" aria-valuemin= "0" aria-valuemax= "100" style= "width: 90%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/vue.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Vue Paper UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$2200 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Argon Design System</span>
</div>
</div>
</th>
<td class= "budget" >
$2500 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-warning" ></i>
<span class= "status" > pending</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 60%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$1800 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Black Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$3150 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-danger" ></i>
<span class= "status" > delayed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 72%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "72" aria-valuemin= "0" aria-valuemax= "100" style= "width: 72%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$1800 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Black Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$3150 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-danger" ></i>
<span class= "status" > delayed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 72%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "72" aria-valuemin= "0" aria-valuemax= "100" style= "width: 72%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > React Material Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$4400 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-info" ></i>
<span class= "status" > on schedule</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 90%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" aria-valuenow= "90" aria-valuemin= "0" aria-valuemax= "100" style= "width: 90%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Dark Tables Example
Project
Budget
Status
Users
Completion
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
<div class= "table-responsive" >
<div>
<table class= "table align-items-center table-dark" >
<thead class= "thead-dark" >
<tr>
<th scope= "col" class= "sort" data-sort= "name" > Project</th>
<th scope= "col" class= "sort" data-sort= "budget" > Budget</th>
<th scope= "col" class= "sort" data-sort= "status" > Status</th>
<th scope= "col" > Users</th>
<th scope= "col" class= "sort" data-sort= "completion" > Completion</th>
<th scope= "col" ></th>
</tr>
</thead>
<tbody class= "list" >
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Argon Design System</span>
</div>
</div>
</th>
<td class= "budget" >
$2500 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-warning" ></i>
<span class= "status" > pending</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 60%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$1800 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Black Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$3150 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-danger" ></i>
<span class= "status" > delayed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 72%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "72" aria-valuemin= "0" aria-valuemax= "100" style= "width: 72%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > React Material Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$4400 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-info" ></i>
<span class= "status" > on schedule</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 90%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" aria-valuenow= "90" aria-valuemin= "0" aria-valuemax= "100" style= "width: 90%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/vue.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Vue Paper UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$2200 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Argon Design System</span>
</div>
</div>
</th>
<td class= "budget" >
$2500 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-warning" ></i>
<span class= "status" > pending</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 60%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$1800 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Black Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$3150 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-danger" ></i>
<span class= "status" > delayed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 72%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "72" aria-valuemin= "0" aria-valuemax= "100" style= "width: 72%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td class= "budget" >
$1800 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-success" ></i>
<span class= "status" > completed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 100%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" style= "width: 100%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > Black Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$3150 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-danger" ></i>
<span class= "status" > delayed</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 72%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "72" aria-valuemin= "0" aria-valuemax= "100" style= "width: 72%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope= "row" >
<div class= "media align-items-center" >
<a href= "#" class= "avatar rounded-circle mr-3" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg" >
</a>
<div class= "media-body" >
<span class= "name mb-0 text-sm" > React Material Dashboard</span>
</div>
</div>
</th>
<td class= "budget" >
$4400 USD
</td>
<td>
<span class= "badge badge-dot mr-4" >
<i class= "bg-info" ></i>
<span class= "status" > on schedule</span>
</span>
</td>
<td>
<div class= "avatar-group" >
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Ryan Tompson" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Romina Hadid" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Alexander Smith" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" >
</a>
<a href= "#" class= "avatar avatar-sm rounded-circle" data-toggle= "tooltip" data-original-title= "Jessica Doe" >
<img alt= "Image placeholder" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" >
</a>
</div>
</td>
<td>
<div class= "d-flex align-items-center" >
<span class= "completion mr-2" > 90%</span>
<div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" aria-valuenow= "90" aria-valuemin= "0" aria-valuemax= "100" style= "width: 90%;" ></div>
</div>
</div>
</div>
</td>
<td class= "text-right" >
<div class= "dropdown" >
<a class= "btn btn-sm btn-icon-only text-light" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "fas fa-ellipsis-v" ></i>
</a>
<div class= "dropdown-menu dropdown-menu-right dropdown-menu-arrow" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>