htmlqtqmlqtquick2

HTML formatting in QML Text


I have a part of HTML code, which displays small table. In browser it looks like in the picture: HTML Table

But when I want to display it in Text QML (which, according to the documentation, should support HTML), I see:

HTML table in QML

(Orange rectangle is a part of rectangle, which is parent of mytext)

Text {
     id: mytext
     anchors.fill: parent
     text: "<div><table border='1'><caption><h4>Test stats</h4>"+
     "</caption><tr bgcolor='#9acd32'><th/><th>Number1</th><th>Number2</th></tr> <tr><th>Line1</th>"+
        "<td> 0 </td> <td> 1 </td> </tr> <tr><th>Line2</th> <td> 0 </td> <td> 1 </td> </tr>"+
        "<tr><th>Line3</th> <td> 0 </td> <td> 0 </td> </tr> <tr><th>Line4</th> <td> 1 </td> <td> 0 </td> </tr>"+
        "<tr><th>Line5</th> <td> 1 </td> <td> 1 </td> </tr> <tr><th>Line6</th> <td> 1 </td> <td> 1 </td> </tr> </div>"
}

So how to display correctly this HTML table in QML (QtQuick 2.0)? Is it possible without using WebView?


Solution

  • Add textFormat: Text.RichText:

    Text {
         id: mytext
         anchors.fill: parent
         textFormat: Text.RichText
         text: "<div><table border='1'><caption><h4>Test stats</h4>"+
         "</caption><tr bgcolor='#9acd32'><th/><th>Number1</th><th>Number2</th></tr> <tr><th>Line1</th>"+
            "<td> 0 </td> <td> 1 </td> </tr> <tr><th>Line2</th> <td> 0 </td> <td> 1 </td> </tr>"+
            "<tr><th>Line3</th> <td> 0 </td> <td> 0 </td> </tr> <tr><th>Line4</th> <td> 1 </td> <td> 0 </td> </tr>"+
            "<tr><th>Line5</th> <td> 1 </td> <td> 1 </td> </tr> <tr><th>Line6</th> <td> 1 </td> <td> 1 </td> </tr> </div>"
    }