[Solved] Want to emulate this type of table with HTML and CSS [closed]

by


What you’re asking for seems quite simple. The example you’ve given has quite nice design choices, in terms of font, weight and color; but the actual markup doesn’t need to be very complicated.

It is basically a bunch of 2 column rows, the first column of each row containing the header and date, the second containing the abstract. The following jsfiddle does that: https://jsfiddle.net/cxmgLctq/

the html:

<div class="container">
  <div class="row">
    <div class="left">
      <h1>
      test
      </h1>
    </div>
    <div class="right">
      <h2>
      more information here.
      </h2>
    </div>
  </div>
  <div class="row">
    <div class="left">
      <h1>
      test
      </h1>
    </div>
    <div class="right">
      <h2>
      more information here.
      </h2>
    </div>
  </div>
</div>

And the css:

.row {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  width: 100%;
  height: 100px;

}

.left {
  float: left;
  width: 200px;
}

.right {
  float: left;
  width: 400px;
}

.container {
  width: 600px;
  height: 600px;
  margin: 20px
  display: block;
}

Notice that I’ve made no real attempt to style it in any way. That styling is what makes the example you posted look nice, and the one i made look terrible. Additionally you could use plenty of libraries to achieve this or indeed a table like you suggested, but it is completely doable with nothing more than divs as well. What you should do will depend on your situation.

solved Want to emulate this type of table with HTML and CSS [closed]