pythondominate

How to use rowspan in td using dominate tags library?


As you can see in the code below, I am generating an HTML table with 4 columns. The first and second column have 1 row and the 3rd and 4th should have 5 rows.

I have tried using rowspan but cannot get it work and it gives weird output. Right now I am using a table element nested in the main table but I don't want to use that, I'd like to use rowspan

from dominate import tags as tags# import time, subprocess, os, datetime, zipfile, shutil

doc = dominate.document(title="whatever")
with doc:
    tags.style("body{font-family:Helvetica}")
    tags.style("h1{font-size:x-large}")
    tags.style("h2{font-size:large}")
    tags.style("table{border-collapse:collapse}")
    tags.style("th{font-size:small;border:1px solid gray;padding:4px;background-color:#DDD}")
    tags.style("td{font-size:small;text-align:center;border:1px solid gray;padding:4px}")   

    with tags.table():
                with tags.thead():
                    tags.th("Test")
                    tags.th("Pass%")
                    tags.th("random")
                    tags.th("Bugs / Notes")
                with tags.tbody():
                    with tags.tr():
                        tags.td("random")
                        tags.td("random", "%", style="font-size:small;text-align:center;border:1px solid gray;padding:4px;background-color:#66FF66")
                        with tags.td():
                            with tags.table(style = ""):
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                        with tags.td():
                            with tags.table():
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                                with tags.tr():
                                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")

HTML_TMP = "/tmp/demo.html"
MAIL_TMP = "/tmp/demo.txt"


# save it to a file
with open(HTML_TMP, "w") as f:
     f.write(str(doc))

Can you please tell me how to do this.


Solution

  • Your problem is with the HTML structure, I think. You want to remove the embedded tables from the main table and just give the first two cells in the first row the attribute rowspan="5". The below does this with minimal other changes to your code.

    import dominate
    from dominate import tags as tags# import time, subprocess, os, datetime, zipfile, shutil
    
    doc = dominate.document(title="whatever")
    with doc:
        tags.style("body{font-family:Helvetica}")
        tags.style("h1{font-size:x-large}")
        tags.style("h2{font-size:large}")
        tags.style("table{border-collapse:collapse}")
        tags.style("th{font-size:small;border:1px solid gray;padding:4px;background-color:#DDD}")
        tags.style("td{font-size:small;text-align:center;border:1px solid gray;padding:4px}")       
        with tags.table():
            with tags.thead():
                tags.th("Test")
                tags.th("Pass%")
                tags.th("random")
                tags.th("Bugs / Notes")
            with tags.tbody():
                with tags.tr(): #Row 1
                    tags.td("random", rowspan="5")
                    tags.td("random", "%", rowspan="5", style="font-size:small;text-align:center;border:1px solid gray;padding:4px;background-color:#66FF66")
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                with tags.tr(): # Row 2 (only cols 3 and 4)
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                with tags.tr(): # Row 3
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                with tags.tr(): # Row 4
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                with tags.tr(): # Row 5
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
                    tags.td("1", style = "font-size:small;text-align:center;padding:4px")
    
    
    HTML_TMP = "/tmp/demo.html"
    MAIL_TMP = "/tmp/demo.txt"
    
    
    # save it to a file
    with open(HTML_TMP, "w") as f:
         f.write(str(doc))
    

    The resulting HTML and output are below (hit unhide, then run code snippet to see results):

    <!DOCTYPE html>
    <html>
      <head>
        <title>whatever</title>
      </head>
      <body><style>body{font-family:Helvetica}</style><style>h1{font-size:x-large}</style><style>h2{font-size:large}</style><style>table{border-collapse
    :collapse}</style><style>th{font-size:small;border:1px solid gray;padding:4px;background-color:#DDD}</style><style>td{font-size:small;text-align:cen
    ter;border:1px solid gray;padding:4px}</style>
        <table>
          <thead>
            <th>Test</th>
            <th>Pass%</th>
            <th>random</th>
            <th>Bugs / Notes</th>
          </thead>
          <tbody>
            <tr>
              <td rowspan="5">random</td>
              <td rowspan="5" style="font-size:small;text-align:center;border:1px solid gray;padding:4px;background-color:#66FF66">random%</td>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
            </tr>
            <tr>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
            </tr>
            <tr>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
            </tr>
            <tr>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
            </tr>
            <tr>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
              <td style="font-size:small;text-align:center;padding:4px">1</td>
            </tr>
          </tbody>
        </table>
      </body>
    </html>

    Note that you could do further tidy up by adding repeated code into a function and calling that, but I'm guessing that this is a placeholder code and you won't actually be adding exactly the same info in each cell