Power Apps Portal - How to Create Custom HTML Table?

You have to create a Web Template for Creating Custom HTML Table through Liquid Code and then you have to link internally with a Page Template and this Page template will be linked to the Web Page. Below is the code. Please check:

{% assign title = 'Page Title Name' %}

{% fetchxml fetchXMLListName%}

<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">

    <entity name="entity_logicalname">

        <attribute name="entity_id" />

        <attribute name="attribute1" />

        <attribute name="attribute2id" />

        <attribute name="attribute3" />

        <order attribute="attribute1" descending="true" />

        <filter type="and">

            <condition attribute="statecode" operator="eq" value="0" />

            <condition attribute="attribute_filter_field1" operator="eq" uitype="filter_entity" value="{{user.id}}" />

            <condition attribute="attribute_filter_field2" operator="eq" uitype="filter_entity2" value="{{request.params.id}}" />

        </filter>

        <link-entity name="entity_logicalname2" from="entity_id2" to="enity_linkenity"

                     visible="false" link-type="outer" alias="aliasname1">

            <attribute name="attribute1" />

        </link-entity>

        <link-entity name="entity_logicalname3" from="entity_id3" to="enity_linkenity2" visible="false"

                     link-type="outer" alias="aliasname2">

            <attribute name="attribute1" />

        </link-entity>

        <link-entity name="entity_logicalname4" from="entity_id4" to="enity_linkenity3" visible="false" link-type="outer"

                     alias="aliasname3">

            <attribute name="attribute1" />

        </link-entity>

    </entity>

</fetch>

{% endfetchxml %}

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

<div class="container">

    {% block title %}

    <h2>{{title}}</h2>

    {% endblock %}

    <div class="row col-lg-12">

        <table class="table" id="myTbl">

            <thead class="thead-dark">

                <tr>

                    <th scope="col">Column 1</th>

                    <th scope="col">Column 2</th>

                    <th scope="col">Column 3</th>

                    <th scope="col">Column 4</th>

                    <th scope="col">Column 5</th>

                    <th scope="col">Column 6</th>

                    <th scope="col">Column 7</th>

                </tr>

            </thead>

            <tbody>

                {% for result in fetchXMLListName.results.entities %}

                <tr>

                    <td><a href="/url/">{{result.entity_id.name}}</a></td>

                    <td>

                        <a href="/url/?id={{result.attribute1}}"

                           target="_blank">{{result.attribute1}}</a>

                    </td>

                    <td>{{ result['aliasname3.attribute1'] }} </td>

                    <td>{{ result['aliasname2.attribute1'] }} </td>

                    <td>{{ result['aliasname1.attribute1'] }}</td>

                    <td>{{ result.attribute2id.name }} </td>

                    <td>{{ result.attribute3}} </td>

                </tr>

                {% endfor %}

            </tbody>

        </table>

        <br />

    </div>

</div>

<script>

    $('#myTbl').DataTable({

        "paging": true,

        "bPaginate": false,

        "bLengthChange": false,

        "bFilter": true,

        "bInfo": false,

        "bAutoWidth": false

    });

</script>

Note: Text Highlighted in Yellow, will be replaced with your Title, Entity name, attribute names, link entity names, alias names, filters, table name, etc.