Hi,
I’m having difficulty formatting HTML in a text tile. I want to create a set of definitions in the form of a table, which is not located in our dataset. I first tried the very limited table format for a text tile in Looker, but it didn’t really let me do much in terms of formatting the text.
I then went to use HTML format, and I am having difficulty actually making a table, with lines in between each cell (i.e. border-collapse). This is what I have so far, and I just want the same border on the outside, to be also the borders between each cell.
<table style="
text-align: center;
font-size: 16px;
padding: 2em 3em;
border-collapse: collapse;
border-style: solid;
border-color: #073763;
border-width: 0.3em;
background-color: #f1f1f1;
margin: 5em;">
<tbody>
<tr style="text-align: center;">
<th>Header</th>
<th>Header2</th>
</tr>
<tr>
</tr>
<tr>
<td style="text-align: center;">
<strong>title1</strong>
</td>
<td>
<p>description</p>
</td>
</tr>
<tr>
<td style="text-align: center;"><strong>title2</strong></td>
<td>description2</td>
</tr>
<tr>
<td style="text-align: center;"><strong>title3</strong></td>
<td>description3</td>
</tr>
<tr>
<td style="text-align: center;"><strong>title4</strong></td>
<td>description4</td>
</tr>
</tbody>
</table>
There seems to be very limited support around this topic, and it would be greatly appreciated if there was a way to make a nice looking table. Thank you!
Solved! Go to Solution.
Hey @stumpstumpstump you’ll want to add:
style="border-style: solid; border-color: #073763; border-width: 0.3em;”
into the <th> and <td>, something like below:
<table style="
text-align: center;
font-size: 16px;
padding: 2em 3em;
border-collapse: collapse;
border-style: solid;
border-color: #073763;
border-width: 0.3em;
background-color: #f1f1f1;
margin: 5em;">
<tbody>
<tr style="text-align: center;">
<th style="border-style: solid; border-color: #073763; border-width: 0.3em;">Header</th>
<th style="border-style: solid; border-color: #073763; border-width: 0.3em;">Header2</th>
</tr>
<tr>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">
<strong>title1</strong>
</td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description</td>
</td>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;"><strong>title2</strong></td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description2</td>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;"><strong>title3</strong></td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description3</td>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;"><strong>title4</strong></td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description4</td>
</tr>
</tbody>
</table>
Hey @stumpstumpstump you’ll want to add:
style="border-style: solid; border-color: #073763; border-width: 0.3em;”
into the <th> and <td>, something like below:
<table style="
text-align: center;
font-size: 16px;
padding: 2em 3em;
border-collapse: collapse;
border-style: solid;
border-color: #073763;
border-width: 0.3em;
background-color: #f1f1f1;
margin: 5em;">
<tbody>
<tr style="text-align: center;">
<th style="border-style: solid; border-color: #073763; border-width: 0.3em;">Header</th>
<th style="border-style: solid; border-color: #073763; border-width: 0.3em;">Header2</th>
</tr>
<tr>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">
<strong>title1</strong>
</td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description</td>
</td>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;"><strong>title2</strong></td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description2</td>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;"><strong>title3</strong></td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description3</td>
</tr>
<tr>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;"><strong>title4</strong></td>
<td style="text-align: center; border-style: solid; border-color: #073763; border-width: 0.3em;">description4</td>
</tr>
</tbody>
</table>
Brilliant @n_davis ! Thank you for your time and help. I was able to create the lines in the table.