↓DEMOのようにdl dt dd（定義リスト）で表をつくる方法を解説します。

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

HTML

    <dl class="demo_dl">
      <dt class="demo_dt">
        <p>Demo</p>
      </dt>
      <dd class="demo_dd">Demo</dd>
      <dt class="demo_dt">
        <p>Demo</p>
      </dt>
      <dd class="demo_dd">Demo</dd>
      <dt class="demo_dt">
         <p>Demo</p>
      </dt>
      <dd class="demo_dd">Demo</dd>
      <dt class="demo_dt">
          <p>Demo</p>
      </dt>
      <dd class="demo_dd">Demo</dd>
    </dl>
        

CSS

      
    .demo_dl {
      background-color: #f8f8f8;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
      margin: 40px 0 20px;
    }
    .demo_dt {
      padding: 20px 15px 0 15px;
      border-top: 1px solid #ccc;
      width: 30%;
      float: left;
    }
    .demo_dd {
      padding: 20px 15px 0 20px;
      border-top: 1px solid #ccc;
      background: #fff;
      margin-left: 30%;
      padding-bottom: 15px;
      border-left: 1px solid #ccc;
      text-align: left;
    }
    .demo_dd::after {
      content: '';
      display: block;
      clear: both;
    }
    .demo_dt span {
      font-size: 14px;
    }
      

dl(全体)にbackground-colorを指定します。 dtのwidthを指定し、float: left;で左に寄せます。 ddには、dtのwidth分のmargin-leftを指定します。 floatの解除は忘れずに。これで定義リストでの表作成が完成となります。 なお、複雑な(説明|定義)リストdl,dt,ddの見た目を表のようにするCSSを参考にさせていただきました。