Present separate tables in one page

Question

I'm really new to HTML, and I work with Python on this.

I have a few seperated HTML "objects" and I want to show, one after one, and I need a space between them.

This is an example I saw on the net:

Here we can see 3 different HTML "objects" and we can see the space between them.

How do I show them on one page?

My Code:

def nlist_to_html(kpi_data_dict):

    headers_lists = ['Total Revenue'] 
    htable = '<br> <table bordercolor=000000 cellspacing="0" cellpadding="1" ' \
             'style="table-layout:fixed; background: #F5F5F5; vertical-align:bottom; font-size:15px;font-family:verdana,sans,sans-serif;border-collapse:collapse;border:3px solid rgb(12, 73, 173); color:rgb(20, 99, 226)" >'

    for header in headers_lists:
        new_header = '<header> <h1> <th bgcolor = "#777" colspan = "6" align = "left" valign = "center"> <font size = "6" color ="white"> {header} </font> </th> </h1> </header>'.format(header= header)
        htable += new_header

        for row in kpi_data_dict:
            newrow = u'<tr>'
            newrow += u'<td align="left" style="padding:1px 4px">' + unicode(row[1][1]) + u'</td>'
            newrow = newrow + ''.join([u'<td align="center" style="padding:1px 4px">' + unicode(x) + u'</td>' for x in row])
            newrow += '</tr>'
            htable += newrow
        htable += '</table>'

    return htable

It looks like there's already space in between them. So what's the problem? — David, Nov 07 '16 at 14:25
You should clarify what you are trying to do and show your code. — Dan Wilson, Nov 07 '16 at 14:27

Yuri Gor · Answer 1 · 2016-11-07T18:45:07.937

I am not sure, what language do you use in this back-end script, but try this:

def nlist_to_html(kpi_data_dict):
headers_lists = ['Total Revenue'] 
htable = '<br> <table bordercolor=000000 cellspacing="0" cellpadding="1" ' \
         'style="table-layout:fixed; background: #F5F5F5; vertical-align:bottom; font-size:15px;font-family:verdana,sans,sans-serif;border-collapse:collapse;border:3px solid rgb(12, 73, 173); color:rgb(20, 99, 226)" >'

for header in headers_lists:
    new_header = '<tr> <th bgcolor = "#777" colspan = "6" align = "left" valign = "center" style="margin-top:15px;"> <header> <h1> <font size = "6" color ="white"> {header} </font> </h1> </header> </th> </tr>'.format(header= header)
    htable += new_header

    for row in kpi_data_dict:
        newrow = u'<tr>'
        newrow += u'<td  align="left" style="padding:1px 4px; margin-top:15px;">' + unicode(row[1][1]) + u'</td>'
        newrow = newrow + ''.join([u'<td align="center" style="padding:1px 4px; margin-top:15px;">' + unicode(x) + u'</td>' for x in row])
        newrow += '</tr>'
        htable += newrow
    htable += '</table>'

return htable

This isn't my question. Without context, your answer is cryptic. — gfullam, Nov 07 '16 at 18:29
Author wanted space between abstract "HTML objects", no code was added to the question. So I wrote abstract answer with this css-code. — Yuri Gor, Nov 07 '16 at 18:31

Present separate tables in one page

1 Answers1