html - CSS/HTML布局思路问题

Question

我正在考虑制作如下图所示的东西。我不知道该怎么做，所以如果有人可以将我链接到教程或快速编写一个示例，那将会很有帮助。

Answer 1

HTML:

<div class='view-data'>

  <div class='view-data-header'><h1>Title here</h1></div>

  <div class='view-data-content'>
    <table>
      <thead>
        <tr>
          <th><img src='' alt='' /></th>
          <th>Col Title 1</th>
          <th>Col Title 2</th>
          <th>Col Title 3</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><img src='' alt='' /></td>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>

        <tr>
          <td><img src='' alt='' /></td>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>

        <tr>
          <td><img src='' alt='' /></td>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
      </tbody>

    </table>
  </div> <!-- end of .view-data-content -->

  <div class='view-data-footer'>
    <a href='link.html'>Link title</a>
  </div>

</div> <!-- end of .view-data -->