HTML formatting in QML Text

Question

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

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

(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?

Answer 1

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>"
}