Таблица в html

https://jsfiddle.net/mhva0b2y/

Чтобы получить адаптивный дизайн (чтобы и на смартфоне было удобно смотреть), это можно сделать float-блоками. Проще говоря, строка -- это три DIV'а со стилем float:left, затем идёт блок DIV со стилем clear:both, затем вторая строка и т. д.

нарисуй в вороде то что хочешь. сохрании в виде html
потом открой блокнотом и броузером одновременно. вычищай все лишнее (ворд кучу ненужной информации добавляет) по чуть чуть, сохраняй и обновляй в броузере. пока не добьешься минимума кода и максимума соответствия.

ну или скачай хоумсайт и делай в нем - есть wyswyg

< table >
< tr >
< td >< image src="http:// www.w3schools.com/html/pic_graph.png">< /td >
< td >Jackson< /td >
< td >94< /td >
< /tr >
< tr >
< td >< image src="http:// im0-tub-ru.yandex.net/i?id=71a7883006742ceee77def36247baf0f&n=24" >< /td >
< td >Doe< /td >
< td >80< /td >
< /tr >
< tr >
< td >< image src="http:// im0-tub-ru.yandex.net/i?id=71a7883006742ceee77def36247baf0f&n=24">< /td >
< td >Doe< /td >
< td >80< /td >
< /tr >
< /table >

используй теги
для определения таблицы.
Далее, внутри тега table определяются ячейки
а внутри них - строки.
Пример:
_< table border = 1 height =100 width = 200>
< tr>
< td>
< /td>
< td>
< /td>
< /tr>
< tr>
< /tr>
< table>