Markdown Table

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

Rank State College Fees
#1 New Jersey Princton University $57,000
#2 Massechusetts MIT $57,000
#3 Massechusetts Harvard University $57,000
#4 California Stanford University $56,000
#5 Connecticut Yale University $62,000
#6 Illinois University of Chicago $62,000
#7 Maryland John Hopkins University $60,000
#8 Pennsylvania University of Pennsiylvania $63,000
#9 California Califronia Institute of Technology $60,000
#10 North Carolina Duke University $63,000
#11 Illinois Northwestern University $62,000

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>Rank</th>
            <th>State</th>
            <th>College</th>
            <th>Fees</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>#1</td>
            <td>New Jersey</td>
            <td>Princeton University</td>
            <td>$57,410</td>
        </tr>
        <tr>
            <td>#2</td>
            <td>Massechusetts</td>
            <td>MIT</td>
            <td>$57,986</td>
        </tr>
        <tr>
            <td>#3</td>
            <td>Massechusetts</td>
            <td>Harvard</td>
            <td>$57,261</td>
        </tr>
        <tr>
            <td>#4</td>
            <td>California</td>
            <td>Stanford</td>
            <td>$56,169</td>
        </tr>
        <tr>
            <td>#5</td>
            <td>Connecticut</td>
            <td>Yale University</td>
            <td>$62,250</td>
        </tr>
        <tr>
            <td>$6</td>
            <td>Illinois</td>
            <td>University of Chicago</td>
            <td>$62,940</td>
        </tr>
        <tr>
            <td>#7</td>
            <td>Maryland</td>
            <td>Johns Hopkins University</td>
            <td>$60,480</td>
        </tr>
        <tr>
            <td>#8</td>
            <td>Pennsylvania</td>
            <td>University of Pennsylvania</td>
            <td>$63,452</td>
        </tr>
    </tbody>
    
</table>
Rank State College Fees
#1 New Jersey Princeton University $57,410
#2 Massechusetts MIT $57,986
#3 Massechusetts Harvard $57,261
#4 California Stanford $56,169
#5 Connecticut Yale University $62,250
$6 Illinois University of Chicago $62,940
#7 Maryland Johns Hopkins University $60,480
#8 Pennsylvania University of Pennsylvania $63,452

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). Addithing the 3rd party 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>Rank</th>
                <th>State</th>
                <th>College</th>
                <th>Fees</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>#1</td>
                <td>New Jersey</td>
                <td>Princeton University</td>
                <td>$57,410</td>
            </tr>
            <tr>
                <td>#2</td>
                <td>Massechusetts</td>
                <td>MIT</td>
                <td>$57,986</td>
            </tr>
            <tr>
                <td>#3</td>
                <td>Massechusetts</td>
                <td>Harvard</td>
                <td>$57,261</td>
            </tr>
            <tr>
                <td>#4</td>
                <td>California</td>
                <td>Stanford</td>
                <td>$56,169</td>
            </tr>
            <tr>
                <td>#5</td>
                <td>Connecticut</td>
                <td>Yale University</td>
                <td>$62,250</td>
            </tr>
            <tr>
                <td>$6</td>
                <td>Illinois</td>
                <td>University of Chicago</td>
                <td>$62,940</td>
            </tr>
            <tr>
                <td>#7</td>
                <td>Maryland</td>
                <td>Johns Hopkins University</td>
                <td>$60,480</td>
            </tr>
            <tr>
                <td>#8</td>
                <td>Pennsylvania</td>
                <td>University of Pennsylvania</td>
                <td>$63,452</td>
            </tr>
            <tr>
                <td>#9</td>
                <td>California</td>
                <td>California Institute of Technology</td>
                <td>$60,864</td>
            </tr>
            <tr>
                <td>#10</td>
                <td>North Carolina</td>
                <td>Duke University</td>
                <td>$63,054</td>
            </tr>
            <tr>
                <td>#11</td>
                <td>Illinois</td>
                <td>Northwestern University</td>
                <td>$63,468</td>
            </tr>
            <tr>
                <td>#12</td>
                <td>New Hampshire</td>
                <td>Darthmouth University</td>
                <td>$62,430</td>
            </tr>
            <tr>
                <td>#13</td>
                <td>Rhode Island</td>
                <td>Brown University</td>
                <td>$65,146</td>
            </tr>
        </tbody>
    </table>
</body>

<!-- Script is used to embed executable code -->
<script>
    $("#demo").DataTable();
</script>
Rank State College Fees
#1 New Jersey Princeton University $57,410
#2 Massechusetts MIT $57,986
#3 Massechusetts Harvard $57,261
#4 California Stanford $56,169
#5 Connecticut Yale University $62,250
$6 Illinois University of Chicago $62,940
#7 Maryland Johns Hopkins University $60,480
#8 Pennsylvania University of Pennsylvania $63,452
#9 California California Institute of Technology $60,864
#10 North Carolina Duke University $63,054
#11 Illinois Northwestern University $63,468
#12 New Hampshire Darthmouth University $62,430
#13 Rhode Island Brown University $65,146

Hacks

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

  • A markdown table does not require any specific code for making a new colown or a new row, all you do it you type your data in the form a a table itslef an you have it, a table on you website, its really easy to use and convinent as well.
  • HTMl and Javascript differ in the form of interactibility, one can easily interact on a site made of JS but not a site made of HTMl.
  • A table that uses JS as described above is more interactable. Let’s say you a table with atleast 100 values, with the help of a JS code the user can easily type in what they want and find it in a matter of seconds. Thus a JS_HTML coded table is better in all sorts of forms.