HTML5のイベントカード

Question

私はhtml 5の開発には新しくなっています。私は以下のようなイベントリストUIを開発する必要があります。 助けてください。

Answer 1

お試しくださいJSFiddleこれがあなたが何をしているのか分かりません。

HTML：

<table class="tg"> 
    <tr> 
    <th style="color:#858C93;font-size:15px" class="tg-031e">12/14/2018</th> 
    <th style="float:left;" class="tg-031e"><strong>EVENT NAME...............</strong> 
    </th> 
    </tr> 
    <tr> 
    <td class="tg-yw4l"><span>12:00</span><small>AM</small></td> 
    <td class="tg-yw4l">The Year Celebration starts on the 31st night</td> 
    </tr> 
</table> 

CSS：あなたがこれまでに試してみました何

.tg {border-collapse:collapse;border-spacing:0;border-width:1px;border-style:solid;} 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:0px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} 
.tg .tg-yw4l{vertical-align:middle} 
span {font-size:25px;color:#FF7F27;} 
small {color:#FF7F27;}