Contoh Table Postingan pada halaman login website

Contoh Table Postingan pada halaman login website

by Adi Jaya

HTML

<div class="container" id="main">
  
  <h2>Semua Postingan</h2>
  
  <div class="button-action-wrap">
    <button>button 1</button>
    <button>button 2</button>
    <button>button 3</button>
  </div>
  
  <table class='table-post'>
    <thead>
      <tr>
        <th><input type="checkbox" id="check-all"/></th>
        <th>Judul</th>
        <th>Status</th>
        <th>Penulis</th>
        <th>Komentar</th>
        <th>Tampilan</th>
        <th>Tanggal</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="idpost[]" value="1"/></td>
        <td>
          <div class="post-title">Lorem Ipsum Dolor Sit Amet</div>
          <div class="post-action">
            <a href="#">Edit</a> | <a href="#">View</a> | <a href="#">Delete</a>
          </div>
        </td>
        <td><em style="color:green">publish</em></td>
        <td><a href="#">Admin</a></td>
        <td>5</td>
        <td>100</td>
        <td>16 Apr, 2019</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="idpost[]" value="2"/></td>
        <td>
          <div class="post-title">Consectetur adipiscing elit</div>
          <div class="post-action">
            <a href="#">Edit</a> | <a href="#">View</a> | <a href="#">Delete</a>
          </div>
        </td>
        <td><em style="color:green">publish</em></td>
        <td><a href="#">Jhon</a></td>
        <td>0</td>
        <td>50</td>
        <td>16 Apr, 2019</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="idpost[]" value="3"/></td>
        <td>
          <div class="post-title">Ut enim ad minim veniam</div>
          <div class="post-action">
            <a href="#">Edit</a> | <a href="#">View</a> | <a href="#">Delete</a>
          </div>
        </td>
        <td><em style="color:red">draft</em></td>
        <td><a href="#">Budi</a></td>
        <td>100</td>
        <td>350</td>
        <td>17 Apr, 2019</td>
      </tr>
    </tbody>
  </table>

</div><!-- #main -->

CSS

body {
    background: #ffffff;
    font-family: sans-serif;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

a {
    text-decoration: none;
    color: #0f70bd;
}

#main {
    margin: 0 auto;
    max-width: 1000px;
    padding: 15px;
}

.table-post {
    width: 100%;
    border: 1px solid #dddddd;
    border-collapse: collapse;
    background: #fff;
    margin: 1em 0;
    font-size: 13px;
}

.table-post th, .table-post td {
    border-top: 1px solid #dddddd;
    text-align: left;
    padding: 8px 10px;
    line-height: 1.5;
    vertical-align: top;
}

.table-post .post-title {
    margin-bottom: 5px;
}

.table-post a:hover {
    text-decoration: underline;
}

[type="checkbox"] {
    cursor: pointer;
}