このタイプのテーブルをHTMLとCSSでエミュレートしたい

Question

私の個人的なブログサイトにこの形式に類似したものを使用しますか？ソースコードは、このようなフォーマットをどのようにコード化できるか、私に多くのヒントを与えていません。

私は何とかこれを行うには、テーブルの各行内のdiv要素を使用して考えていたが、私はそれを行うにはクリーンな方法があります知っています。どんな勧告？あなたは非常に簡単と思われるために何を求めている

Answer 1

。あなたが与えた例は、フ​​ォント、重量、色の点でかなり良いデザインの選択肢を持っています。実際のマークアップは非常に複雑である必要はありません。

これは基本的に2列、行、ヘッダおよび日付を含む各行の最初の列、抽象を含む第二の束です。次jsfiddleはないこと：https://jsfiddle.net/cxmgLctq/

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> 

と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; 
} 

注意してください。そのスタイリングはあなたが投稿した例を見栄えのいいものにし、私が見せてくれたものをひどく見えるようにするものです。さらに、これを実現するライブラリや実際に提案したようなテーブルをたくさん使うこともできますが、divだけでは完全に実行可能です。あなたがするべきことは、あなたの状況によって異なります。