JS Output w/ jquery student hack

My Markdown Table

Brawl stars brawlers with trophy count, power level

Brawler	Rank	Trophies	Power Level
El Primo	25	700	11
Shelly	25	634	11
Jessie	24	629	9
Frank	22	622	9
Darryl	23	600	7
Dynamike	23	576	9
Surge	21	551	7
Piper	21	550	9
Gale	20	542	9
Bibi	20	504	7
Sprout	17	347	6

Benefits of a markdown table

A markdown table allows you to easily organize data in a table without using the relatively complex HTML syntax. It shows both you (the author) and the viewers what is in the table and is simple and beginners can understand.

HTML Table

Table made from learning from w3schools html table tutorial on making tables in HTML

%%html
<table class="table">
    <thead>
        <tr>
            <th>Brawler</th>
            <th>Rank</th>
            <th>Trophies</th>
            <th>Power Level</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>El Primo</td>
            <td>25</td>
            <td>700</td>
            <td>11</td>
        </tr>
        <tr>
            <td>Shelly</td>
            <td>25</td>
            <td>634</td>
            <td>11</td>
        </tr>
        <tr>
            <td>Jessie</td>
            <td>24</td>
            <td>629</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Frank</td>
            <td>22</td>
            <td>622</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Darryl</td>
            <td>23</td>
            <td>600</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Dynamike</td>
            <td>23</td>
            <td>576</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Surge</td>
            <td>21</td>
            <td>551</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Piper</td>
            <td>21</td>
            <td>550</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Gale</td>
            <td>20</td>
            <td>542</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Bibi</td>
            <td>20</td>
            <td>504</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Sprout</td>
            <td>17</td>
            <td>347</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

Brawler	Rank	Trophies	Power Level
El Primo	25	700	11
Shelly	25	634	11
Jessie	24	629	9
Frank	22	622	9
Darryl	23	600	7
Dynamike	23	576	9
Surge	21	551	7
Piper	21	550	9
Gale	20	542	9
Bibi	20	504	7
Sprout	17	347	6

HTML Table with JavaScript jquery

JavaScript is a programming language that works with HTML data, CSS helps to style that data. Adding the 3rd party JS/CSS code makes the table interactive.

Look at the href and src on lines inside of the lines in <head> tags. This is adding code to our page from others.
Observe the <script> tags at the bottom of the page. This is generating the interactive table, from the third party code, using the data <table id="demo"> from the <body>.

%%html

<!-- Head contains information to Support the Document -->
<head>
    <!-- load jQuery and DataTables output style and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

<!-- Body contains the contents of the Document -->
<body>
    <table id="demo" class="table">
        <thead>
            <tr>
                <th>Brawler</th>
                <th>Rank</th>
                <th>Trophies</th>
                <th>Power Level</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>El Primo</td>
                <td>25</td>
                <td>700</td>
                <td>11</td>
            </tr>
            <tr>
                <td>Shelly</td>
                <td>25</td>
                <td>634</td>
                <td>11</td>
            </tr>
            <tr>
                <td>Jessie</td>
                <td>24</td>
                <td>629</td>
                <td>9</td>
            </tr>
            <tr>
                <td>Frank</td>
                <td>22</td>
                <td>622</td>
                <td>9</td>
            </tr>
            <tr>
                <td>Darryl</td>
                <td>23</td>
                <td>600</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Dynamike</td>
                <td>23</td>
                <td>576</td>
                <td>9</td>
            </tr>
            <tr>
                <td>Surge</td>
                <td>21</td>
                <td>551</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Piper</td>
                <td>21</td>
                <td>550</td>
                <td>9</td>
            </tr>
            <tr>
                <td>Gale</td>
                <td>20</td>
                <td>542</td>
                <td>9</td>
            </tr>
            <tr>
                <td>Bibi</td>
                <td>20</td>
                <td>504</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Sprout</td>
                <td>17</td>
                <td>347</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>
</body>

<!-- Script is used to embed executable code -->
<script>
    $("#demo").DataTable();
</script>

Brawler	Rank	Trophies	Power Level
El Primo	25	700	11
Shelly	25	634	11
Jessie	24	629	9
Frank	22	622	9
Darryl	23	600	7
Dynamike	23	576	9
Surge	21	551	7
Piper	21	550	9
Gale	20	542	9
Bibi	20	504	7
Sprout	17	347	6

HTML vs JavaScript

HTML (HyperText Markup Language) provides much of the backbone of a website, as it is a markup language and allows for creation of static structures. In contrast, JavaScript provides a dynamic environment to handle dynamic events on the web and add interactivity to static things created through HTML.

Creating a table with JavaScript allows for efficiency and time-saving for the creator of the table. The syntax for JavaScript is less complex/redudant than HTML and it is possible to output a string of HTML using JavScript to make a table.

Additionally, JavaScript helps to style the HTML table by adding 3rd-party CSS code and provide user interaction and dynamic styling.

JS Output w/ jquery student hack • 10 min read

Description

My Markdown Table

Benefits of a markdown table

HTML Table

HTML Table with JavaScript jquery

HTML vs JavaScript