Markdown Table

Google markdown cheat sheet and it lead you to an outline for how to make a table.

Language Creator Year Latest Version
Python Guido van Rossum 1991 3.11
C Brian K. and Dennis R. 1978 C23
C++ Bjarne Stroustrup 1979 C++20
Java James Gosling 1995 JDK 20
HTML Tim Berners-Lee 1980 HTML5
JavaScript Brendan Eich 1995 ES14
Bash Brian Fox 1989 5.2
PowerShell Jeffery Snover 2006 7.3
C# Anders Hejlsberg 2000 C# 11.0
SQL Donald C. and Raymond B. 1974 16.0

HTML Table

Google w3schools html table and it will lead you to a tutorial on how to make tables.

%%html
<table class="table">
    <thead>
        <tr>
            <th>Language</th>
            <th>Creator</th>
            <th>Year</th>
            <th>Latest Version</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Python</td>
            <td>Guido van Rossum</td>
            <td>1991</td>
            <td>3.11</td>
        </tr>
        <tr>
            <td>C</td>
            <td>Brian K. and Dennis R.</td>
            <td>1978</td>
            <td>C23</td>
        </tr>
        <tr>
            <td>C++</td>
            <td>Bjarne Stroustrup</td>
            <td>1979</td>
            <td>C++20</td>
        </tr>
        <tr>
            <td>Java</td>
            <td>James Gosling</td>
            <td>1995</td>
            <td>JDK 20</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>Tim Berners-Lee</td>
            <td>1980</td>
            <td>HTML5</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Brendan Eich</td>
            <td>1995</td>
            <td>ES14</td>
        </tr>
        <tr>
            <td>Bash</td>
            <td>Brian Fox</td>
            <td>1989</td>
            <td>5.2</td>
        </tr>
        <tr>
            <td>PowerShell</td>
            <td>Jeffery Snover</td>
            <td>2006</td>
            <td>7.3</td>
        </tr>
    </tbody>
</table>
Language Creator Year Latest Version
Python Guido van Rossum 1991 3.11
C Brian K. and Dennis R. 1978 C23
C++ Bjarne Stroustrup 1979 C++20
Java James Gosling 1995 JDK 20
HTML Tim Berners-Lee 1980 HTML5
JavaScript Brendan Eich 1995 ES14
Bash Brian Fox 1989 5.2
PowerShell Jeffery Snover 2006 7.3

HTML Table with JavaScript jquery

JavaScript is a programming language that works with HTML data, CSS helps to style that data. In this example, we are using JavaScript and CSS that was developed by others (3rd party). JavaScript works in the backend as a programming language, while HTML displays that as a markup language.

  • One HUGE benefit of using JS for tables is the ability to sort based on specific fields, search, display multiple pages, and a lot more customizability
  • JS in general allows for more flexibility in web development
%%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>Language</th>
                <th>Creator</th>
                <th>Year</th>
                <th>Latest Version</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Python</td>
                <td>Guido van Rossum</td>
                <td>1991</td>
                <td>3.11</td>
            </tr>
            <tr>
                <td>C</td>
                <td>Brian K. and Dennis R.</td>
                <td>1978</td>
                <td>C23</td>
            </tr>
            <tr>
                <td>C++</td>
                <td>Bjarne Stroustrup</td>
                <td>1979</td>
                <td>C++20</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>James Gosling</td>
                <td>1995</td>
                <td>JDK 20</td>
            </tr>
            <tr>
                <td>HTML</td>
                <td>Tim Berners-Lee</td>
                <td>1980</td>
                <td>HTML5</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>Brendan Eich</td>
                <td>1995</td>
                <td>ES14</td>
            </tr>
            <tr>
                <td>Bash</td>
                <td>Brian Fox</td>
                <td>1989</td>
                <td>5.2</td>
            </tr>
            <tr>
                <td>PowerShell</td>
                <td>Jeffery Snover</td>
                <td>2006</td>
                <td>7.3</td>
            </tr>
            <tr>
                <td>C#</td>
                <td>Anders Hejlsberg</td>
                <td>2000</td>
                <td>C# 11.0</td>
            </tr>
            <tr>
                <td>SQL</td>
                <td>Donald C. & Raymond B.</td>
                <td>1974</td>
                <td>16.0</td>
            </tr>
        </tbody>
    </table>
</body>

<!-- Script is used to embed executable code -->
<script>
    $("#demo").DataTable();
</script>
Language Creator Year Latest Version
Python Guido van Rossum 1991 3.11
C Brian K. and Dennis R. 1978 C23
C++ Bjarne Stroustrup 1979 C++20
Java James Gosling 1995 JDK 20
HTML Tim Berners-Lee 1980 HTML5
JavaScript Brendan Eich 1995 ES14
Bash Brian Fox 1989 5.2
PowerShell Jeffery Snover 2006 7.3
C# Anders Hejlsberg 2000 C# 11.0
SQL Donald C. & Raymond B. 1974 16.0

Hacks

This lesson teaches you about tables. In this hack, it is important that you analze the difference in the styles of output shown.

  • Make your own tables, with data according to your interests.
  • Describe a benefit of a markdown table.
  • Try to Style the HTML table using w3schools.
  • Describe the difference between HTML and JavaScript.
  • Describe a benefit of a table that uses JavaScript.