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

by

[ad_1]

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.

[ad_2]

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