مونو- قالب ریسپانسیو داشبورد مدیریت

مونو انواع مختلفی از کامپوننت‌های جداول بوت استرپ را با کمی سفارشی‌سازی متناسب با استانداردهای طراحی خود ارائه می‌دهد. برای اطلاعات بیشتر، لطفاً به مستندات رسمی بوت استرپ مراجعه کنید.

جدول پایه


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">ستون اول</th>
      <th scope="col">ستون آخر</th>
      <th scope="col">عملیات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Lucia</td>
      <td>Christ</td>
      <td>@Lucia</td>
    </tr>
    <tr>
      <td scope="row">2</td>
      <td>Catrin</td>
      <td>Seidl</td>
      <td>@catrin</td>
    </tr>
    <tr>
      <td scope="row">3</td>
      <td>Lilli</td>
      <td>Kirsh</td>
      <td>@lilli</td>
    </tr>
    <tr>
      <td scope="row">4</td>
      <td>Else</td>
      <td>Voigt</td>
      <td>@voigt</td>
    </tr>
    <tr>
      <td scope="row">5</td>
      <td>Ursel</td>
      <td>Harms</td>
      <td>@ursel</td>
    </tr>
    <tr>
      <td scope="row">6</td>
      <td>Anke</td>
      <td>Sauter</td>
      <td>@Anke</td>
    </tr>
  </tbody>
</table>

#	ستون اول	ستون آخر	عملیات
1	Lucia	Christ	@Lucia
2	Catrin	Seidl	@catrin
3	Lilli	Kirsh	@lilli
4	Else	Voigt	@voigt
5	Ursel	Harms	@ursel
6	Anke	Sauter	@Anke

جدول حاشیه دار


<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">ستون اول</th>
      <th scope="col">ستون دومlt;/th>
      <th scope="col">ستون آخر</th>
      <th class="text-center">عملیات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Lucia</td>
      <td>Christ</td>
      <td>@Lucia</td>
      <th class="text-center">
        <a href="#">
          <i class="mdi mdi-open-in-new"></i>
        </a>
        <a href="#">
          <i class="mdi mdi-close text-danger"></i>
        </a>

      </th>
    </tr>
    <tr>
      <td scope="row">2</td>
      <td>Catrin</td>
      <td>Seidl</td>
      <td>@catrin</td>
      <th class="text-center">
        <a href="#">
          <i class="mdi mdi-open-in-new"></i>
        </a>
        <a href="#">
          <i class="mdi mdi-close text-danger"></i>
        </a>

      </th>
    </tr>
    <tr>
      <td scope="row">3</td>
      <td>Lilli</td>
      <td>Kirsh</td>
      <td>@lilli</td>
      <th class="text-center">
        <a href="#">
          <i class="mdi mdi-open-in-new"></i>
        </a>
        <a href="#">
          <i class="mdi mdi-close text-danger"></i>
        </a>

      </th>
    </tr>
    <tr>
      <td scope="row">4</td>
      <td>Else</td>
      <td>Voigt</td>
      <td>@voigt</td>
      <th class="text-center">
        <a href="#">
          <i class="mdi mdi-open-in-new"></i>
        </a>
        <a href="#">
          <i class="mdi mdi-close text-danger"></i>
        </a>

      </th>
    </tr>
    <tr>
      <td scope="row">5</td>
      <td>Ursel</td>
      <td>Harms</td>
      <td>@ursel</td>
      <th class="text-center">
        <a href="#">
          <i class="mdi mdi-open-in-new"></i>
        </a>
        <a href="#">
          <i class="mdi mdi-close text-danger"></i>
        </a>

      </th>
    </tr>
    <tr>
      <td scope="row">6</td>
      <td>Anke</td>
      <td>Sauter</td>
      <td>@Anke</td>
      <th class="text-center">
        <a href="#">
          <i class="mdi mdi-open-in-new"></i>
        </a>
        <a href="#">
          <i class="mdi mdi-close text-danger"></i>
        </a>

      </th>
    </tr>
  </tbody>
</table>

#	ستون اول	ستون دوم	ستون آخر
1	Lucia	Christ	@Lucia
2	Catrin	Seidl	@catrin
3	Lilli	Kirsh	@lilli
4	Else	Voigt	@voigt
5	Ursel	Harms	@ursel
6	Anke	Sauter	@Anke

جدول تیره


<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">ستون اول</th>
      <th scope="col">ستون آخر</th>
      <th scope="col">عملیات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Lucia</td>
      <td>Christ</td>
      <td>@Lucia</td>
    </tr>
    <tr>
      <td scope="row">2</td>
      <td>Catrin</td>
      <td>Seidl</td>
      <td>@catrin</td>
    </tr>
    <tr>
      <td scope="row">3</td>
      <td>Lilli</td>
      <td>Kirsh</td>
      <td>@lilli</td>
    </tr>
    <tr>
      <td scope="row">4</td>
      <td>Else</td>
      <td>Voigt</td>
      <td>@voigt</td>
    </tr>
    <tr>
      <td scope="row">5</td>
      <td>Ursel</td>
      <td>Harms</td>
      <td>@ursel</td>
    </tr>
    <tr>
      <td scope="row">6</td>
      <td>Anke</td>
      <td>Sauter</td>
      <td>@Anke</td>
    </tr>
  </tbody>
</table>

#	ستون اول	ستون آخر	عملیات
1	Lucia	Christ	@Lucia
2	Catrin	Seidl	@catrin
3	Lilli	Kirsh	@lilli
4	Else	Voigt	@voigt
5	Ursel	Harms	@ursel
6	Anke	Sauter	@Anke

جدول راه راه


<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">ستون اول</th>
      <th scope="col">ستون آخر</th>
      <th scope="col">عملیات</th>
      <th scope="col">فعال</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Lucia</td>
      <td>Christ</td>
      <td>@Lucia</td>
      <td>
        <label class="switch switch-primary switch-pill form-control-label ">
          <input type="checkbox" class="switch-input form-check-input" value="on" checked>
          <span class="switch-label"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td scope="row">2</td>
      <td>Catrin</td>
      <td>Seidl</td>
      <td>@catrin</td>
      <td>
        <label class="switch switch-primary switch-pill form-control-label ">
          <input type="checkbox" class="switch-input form-check-input" value="on">
          <span class="switch-label"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td scope="row">3</td>
      <td>Lilli</td>
      <td>Kirsh</td>
      <td>@lilli</td>
      <td>
        <label class="switch switch-primary switch-pill form-control-label ">
          <input type="checkbox" class="switch-input form-check-input" value="on" checked>
          <span class="switch-label"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td scope="row">4</td>
      <td>Else</td>
      <td>Voigt</td>
      <td>@voigt</td>
      <td>
        <label class="switch switch-primary switch-pill form-control-label ">
          <input type="checkbox" class="switch-input form-check-input" value="on">
          <span class="switch-label"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td scope="row">5</td>
      <td>Ursel</td>
      <td>Harms</td>
      <td>@ursel</td>
      <td>
        <label class="switch switch-primary switch-pill form-control-label ">
          <input type="checkbox" class="switch-input form-check-input" value="on" checked>
          <span class="switch-label"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td scope="row">6</td>
      <td>Anke</td>
      <td>Sauter</td>
      <td>@Anke</td>
      <td>
        <label class="switch switch-primary switch-pill form-control-label ">
          <input type="checkbox" class="switch-input form-check-input" value="on">
          <span class="switch-label"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>
  </tbody>
</table>

#	ستون اول	ستون آخر	عملیات
1	Lucia	Christ	@Lucia
2	Catrin	Seidl	@catrin
3	Lilli	Kirsh	@lilli
4	Else	Voigt	@voigt
5	Ursel	Harms	@ursel
6	Anke	Sauter	@Anke

جدول زمینه‌دار


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">ستون اول</th>
      <th scope="col">ستون آخر</th>
      <th scope="col">عملیات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>Lucia</td>
      <td>Christ</td>
      <td>@Lucia</td>
    </tr>
    <tr class="table-primary">
      <td scope="row">2</td>
      <td>Catrin</td>
      <td>Seidl</td>
      <td>@catrin</td>
    </tr>
    <tr class="table-info">
      <td scope="row">3</td>
      <td>Lilli</td>
      <td>Kirsh</td>
      <td>@lilli</td>
    </tr>
    <tr class="table-success">
      <td scope="row">4</td>
      <td>Else</td>
      <td>Voigt</td>
      <td>@voigt</td>
    </tr>
    <tr class="table-danger">
      <td scope="row">5</td>
      <td>Ursel</td>
      <td>Harms</td>
      <td>@ursel</td>
    </tr>
    <tr class="table-warning">
      <td scope="row">6</td>
      <td>Anke</td>
      <td>Sauter</td>
      <td>@Anke</td>
    </tr>
  </tbody>
</table>

#	ستون اول	ستون آخر	عملیات
1	Lucia	Christ	@Lucia
2	Catrin	Seidl	@catrin
3	Lilli	Kirsh	@lilli
4	Else	Voigt	@voigt
5	Ursel	Harms	@ursel
6	Anke	Sauter	@Anke

جدول ساده

        
        <table class="table table-dark">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">ستون اول</th>
              <th scope="col">ستون آخر</th>
              <th scope="col">عملیات</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td scope="row">1</td>
              <td>Lucia</td>
              <td>Christ</td>
              <td>@Lucia</td>
            </tr>
            <tr>
              <td scope="row">2</td>
              <td>Catrin</td>
              <td>Seidl</td>
              <td>@catrin</td>
            </tr>
            <tr>
              <td scope="row">3</td>
              <td>Lilli</td>
              <td>Kirsh</td>
              <td>@lilli</td>
            </tr>
            <tr>
              <td scope="row">4</td>
              <td>Else</td>
              <td>Voigt</td>
              <td>@voigt</td>
            </tr>
            <tr>
              <td scope="row">5</td>
              <td>Ursel</td>
              <td>Harms</td>
              <td>@ursel</td>
            </tr>
            <tr>
              <td scope="row">6</td>
              <td>Anke</td>
              <td>Sauter</td>
              <td>@Anke</td>
            </tr>
          </tbody>
        </table>

#	ستون اول	ستون آخر	عملیات/th>
1	Lucia	Christ	@Lucia
2	Catrin	Seidl	@catrin
3	Lilli	Kirsh	@lilli
4	Else	Voigt	@voigt
5	Ursel	Harms	@ursel
6	Anke	Sauter	@Anke

جدول پایه

جدول حاشیه دار

جدول تیره

جدول راه راه

جدول زمینه‌دار

جدول ساده

مخاطبین