<article class="article">
  <h1 class="article-title">내정보</h1>
  <div class="article-content">
    <p>내정보다</p>
    <table class="personinfo">
      <thead>
        <tr>
          <th class="personinfo-th">이름</th>
          <th class="personinfo-th">나이</th>
          <th class="personinfo-th">직업</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="personinfo-td">진우</td>
          <td class="personinfo-td">27</td>
          <td class="personinfo-td personinfo-td__active">
            <section class="job">
              <table class="jobinfo">
                <tbody>
                  <tr>
                    <th class="jobinfo-th">하는일</th>
                    <td class="jobinfo-td">front-end web dev.</td>
                  </tr>
                </tbody>
              </table>
            </section> 
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</article>
.article {
  width: 300px;
}
.article-title {
  margin: 0;
  padding: 0 1em;
  background: #ccc;
}
.article-content {
  margin: 0;
  padding: 2em;
  background-color: #efefef;
}
.personinfo-th,
.personinfo-td {
  padding: 1em;
  border: 2px dashed #00f;   
}

.personinfo-th {
  color: #fff;
  background-color: #0aa;
}
.personinfo-td__active {
  background-color: #fff;
}

.jobinfo-th,
.jobinfo-td {
  padding: .5em;
  border-width: 1px;
  border-style: solid;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.