HTML formatting in QML text

Question

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

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

(The orange rectangle is part of the rectangle that is the 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 correctly display this HTML table in QML (QtQuick 2.0)? Is it possible to use 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>" }