-1

I need to build a complex table in HTML for schedule web-application. It should looks like so: http://s7.postimg.org/f3m25bnuj/schedule_layout.jpg

How can I achieve this in HTML?
Which approach is best to build such a table?
Is "Bootstrap" CSS framework capable to do that too?
My table will have more than 12 columns

3 Answers 3

4

That is a pretty complex table. I would recommend that you use some visual tools (like Dreamweaver) to draw this table. Trying such complex table by code is possible but its very time consuming and could result in errors that might have to re-check and redo. Bootstrap has style definitions that you can apply to a table, but trying this particular table via bootstrap css is possible but time consuming. check this jsfiddle: https://jsfiddle.net/brijeshb/zn9eo7uu/

<table width="80%" border="1" cellspacing="1" cellpadding="2">
      <tr>
        <td width="8%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="14%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="9%">&nbsp;</td>
      </tr>
      <tr>
        <td rowspan="21">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="10">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
        <td rowspan="5">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
3
  • Time consumption doesn't matter for me, I am going to build table using python
    – pi314159
    Jun 6, 2015 at 17:36
  • Well, okay, then you should go ahead and give it a try. After you build the table, you could apply Bootstrap css for styles, and responsivness.
    – bbh
    Jun 6, 2015 at 17:39
  • Thank you, this solution is robust but pretty ugly. I will keep it for the worst case
    – pi314159
    Jun 6, 2015 at 18:02
3

what have you tried so far? tables would not be recommended for layout purposes and it really depends on a few things for example, does you app need to be responsive? what data would each "box" display? pictures?.

If I were you I would try to use some grid system to start with but the table approach would be too messy and not suitable for creating a layout of that kind.

3
  • My app does not need to be responsive. Each box will display formatted text data Each column and row must have the same width and height respectively to form layout like excel table. No pictures in cells
    – pi314159
    Jun 6, 2015 at 17:42
  • Which grid system can I use to build such table? Any suggestions?
    – pi314159
    Jun 6, 2015 at 17:44
  • you don't really need any specific grid system, have a read at this article and you'll understand the grid approach which is the best for your case link, and please accept the answer as the right one. Jun 6, 2015 at 17:50
2

Yes, you can achieve this in HTML by using colspan and rowspan attributes.

You should use table element only.

"Bootstrap" framework should be used in order to achieve the responsive design.

In smaller screens like ipad, mobile devices, use the following library to avoid distortion.

http://fooplugins.com/plugins/footable-jquery/

Not the answer you're looking for? Browse other questions tagged or ask your own question.