JS Output w/ jquery

Markdown Table

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

Make	Model	Year	Color	Price
Ford	Mustang	2022	Red	$35,000
Toyota	Camry	2022	Silver	$25,00
Tesla	Model S	2022	White	$80,000
Cadillac	Broughan	1969	Black	$10,000
Ford	F-350	1997	Green	$15,000
Ford	Excursion	2003	Green	$25,000
Ford	Ranger	2012	Red	$8,000
Kuboto	L3301 Tractor	2015	Orange	$12,000
Ford	Fusion Energi	2015	Green	$15,000
Acura	XL	2006	Grey	$10,000
Ford	F150 Lightning	2023	Grey	$70,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>Make</th>
            <th>Model</th>
            <th>Year</th>
            <th>Color</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cadillac</td>
            <td>Broughan</td>
            <td>1969</td>
            <td>Black</td>
            <td>$10,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>F-350</td>
            <td>1997</td>
            <td>Green</td>
            <td>$15,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>Excursion</td>
            <td>2003</td>
            <td>Green</td>
            <td>$25,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>Ranger</td>
            <td>2012</td>
            <td>Red</td>
            <td>$8,000</td>
        </tr>
        <tr>
            <td>Kuboto</td>
            <td>L3301 Tractor</td>
            <td>2015</td>
            <td>Orange</td>
            <td>$12,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>Fusion Energi</td>
            <td>2015</td>
            <td>Guard</td>
            <td>$25,000</td>
        </tr>
        <tr>
            <td>Acura</td>
            <td>XL</td>
            <td>2006</td>
            <td>Grey</td>
            <td>$10,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>F150 Lightning</td>
            <td>2024</td>
            <td>Guard</td>
            <td>$70,000</td>
        </tr>
    </tbody>
</table>

Make	Model	Year	Color	Price
Cadillac	Broughan	1969	Black	$10,000
Ford	F-350	1997	Green	$15,000
Ford	Excursion	2003	Green	$25,000
Ford	Ranger	2012	Red	$8,000
Kuboto	L3301 Tractor	2015	Orange	$12,000
Ford	Fusion Energi	2015	Guard	$25,000
Acura	XL	2006	Grey	$10,000
Ford	F150 Lightning	2024	Guard	$70,000

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
<html>

<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>
    <table id="demo" class="table">
        <thead>
            <tr>
                <th>Team</th>
                <th>City</th>
                <th>Founded</th>
                <th>Championships</th>
                <th>Colors</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lakers</td>
                <td>Los Angeles</td>
                <td>1947</td>
                <td>17</td>
                <td>Purple, Gold</td>
            </tr>
            <tr>
                <td>Celtics</td>
                <td>Boston</td>
                <td>1946</td>
                <td>17</td>
                <td>Green, White</td>
            </tr>
            <tr>
                <td>Bulls</td>
                <td>Chicago</td>
                <td>1966</td>
                <td>6</td>
                <td>Red, Black</td>
            </tr>
            <tr>
                <td>Warriors</td>
                <td>Golden State</td>
                <td>1946</td>
                <td>6</td>
                <td>Blue, Gold</td>
            </tr>
            <tr>
                <td>Spurs</td>
                <td>San Antonio</td>
                <td>1967</td>
                <td>5</td>
                <td>Black, Silver</td>
            </tr>
            <tr>
                <td>Heat</td>
                <td>Miami</td>
                <td>1988</td>
                <td>3</td>
                <td>Red, Black</td>
            </tr>
            <tr>
                <td>Raptors</td>
                <td>Toronto</td>
                <td>1995</td>
                <td>1</td>
                <td>Red, Black</td>
            </tr>
            <tr>
                <td>Thunder</td>
                <td>Oklahoma City</td>
                <td>1967</td>
                <td>1</td>
                <td>Blue, Orange</td>
            </tr>
            <tr>
                <td>Bucks</td>
                <td>Milwaukee</td>
                <td>1968</td>
                <td>2</td>
                <td>Green, Cream</td>
            </tr>
            <tr>
                <td>76ers</td>
                <td>Philadelphia</td>
                <td>1946</td>
                <td>3</td>
                <td>Blue, Red</td>
            </tr>
            <tr>
                <td>Rockets</td>
                <td>Houston</td>
                <td>1967</td>
                <td>2</td>
                <td>Red, Black</td>
            </tr>
        </tbody>
    </table>
</body>

<script>
    $("#demo").DataTable();
</script>

</html>

Team	City	Founded	Championships	Colors
Lakers	Los Angeles	1947	17	Purple, Gold
Celtics	Boston	1946	17	Green, White
Bulls	Chicago	1966	6	Red, Black
Warriors	Golden State	1946	6	Blue, Gold
Spurs	San Antonio	1967	5	Black, Silver
Heat	Miami	1988	3	Red, Black
Raptors	Toronto	1995	1	Red, Black
Thunder	Oklahoma City	1967	1	Blue, Orange
Bucks	Milwaukee	1968	2	Green, Cream
76ers	Philadelphia	1946	3	Blue, Red
Rockets	Houston	1967	2	Red, Black

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.

%%html
<html>

<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>
    <table id="demo" class="table">
        <thead>
            <tr>
                <th>Team</th>
                <th>City</th>
                <th>Founded</th>
                <th>Championships</th>
                <th>Colors</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lakers</td>
                <td>Los Angeles</td>
                <td>1947</td>
                <td>17</td>
                <td>Purple, Gold</td>
            </tr>
            <tr>
                <td>Celtics</td>
                <td>Boston</td>
                <td>1946</td>
                <td>17</td>
                <td>Green, White</td>
            </tr>
            <tr>
                <td>Bulls</td>
                <td>Chicago</td>
                <td>1966</td>
                <td>6</td>
                <td>Red, Black</td>
            </tr>
            <tr>
                <td>Warriors</td>
                <td>Golden State</td>
                <td>1946</td>
                <td>6</td>
                <td>Blue, Gold</td>
            </tr>
            <tr>
                <td>Spurs</td>
                <td>San Antonio</td>
                <td>1967</td>
                <td>5</td>
                <td>Black, Silver</td>
            </tr>
            <tr>
                <td>Heat</td>
                <td>Miami</td>
                <td>1988</td>
                <td>3</td>
                <td>Red, Black</td>
            </tr>
            <tr>
                <td>Raptors</td>
                <td>Toronto</td>
                <td>1995</td>
                <td>1</td>
                <td>Red, Black</td>
            </tr>
            <tr>
                <td>Thunder</td>
                <td>Oklahoma City</td>
                <td>1967</td>
                <td>1</td>
                <td>Blue, Orange</td>
            </tr>
            <tr>
                <td>Bucks</td>
                <td>Milwaukee</td>
                <td>1968</td>
                <td>2</td>
                <td>Green, Cream</td>
            </tr>
            <tr>
                <td>76ers</td>
                <td>Philadelphia</td>
                <td>1946</td>
                <td>3</td>
                <td>Blue, Red</td>
            </tr>
            <tr>
                <td>Rockets</td>
                <td>Houston</td>
                <td>1967</td>
                <td>2</td>
                <td>Red, Black</td>
            </tr>
        </tbody>
    </table>
</body>

<script>
    $("#demo").DataTable();
</script>

    <style>
        h1 {
            font-size: 50px;
            text-align: center;
            margin-top: 50px;
            color: #000000;
        }
        table {
            width: 1000px;
            border-collapse: separate;
            margin: 0 auto;  
            background-color: rgb(217, 238, 255);
        }
        th, td {
            border: 1.5px dashed #000000;
            padding: 10px 10px;
            text-align: center;
            width: 333px;
        }
        th {
            background-color: #333;
            color: #ffffff;
        }
        td {
            color: #000000;
        }
        a {
            color:black;
        }
    </style>

</html>

Team	City	Founded	Championships	Colors
Lakers	Los Angeles	1947	17	Purple, Gold
Celtics	Boston	1946	17	Green, White
Bulls	Chicago	1966	6	Red, Black
Warriors	Golden State	1946	6	Blue, Gold
Spurs	San Antonio	1967	5	Black, Silver
Heat	Miami	1988	3	Red, Black
Raptors	Toronto	1995	1	Red, Black
Thunder	Oklahoma City	1967	1	Blue, Orange
Bucks	Milwaukee	1968	2	Green, Cream
76ers	Philadelphia	1946	3	Blue, Red
Rockets	Houston	1967	2	Red, Black

Hacks

There are many benefits of markdown tables. First of all it is easy-to-learn. All you need is pipes “|” and dashes “-” between the words. Second of all the compatibility is amazing. It can be used with jupyter notebooks and markdown files. You can also use html in markdown files. Third of all readability and maintainability are great and easy to keep up to date.

HTML and JavaScript are two different programming languages that are often used together to create web pages. HTML is a markup language that is used to define the structure of a web page, while JavaScript is a scripting language that is used to add interactivity to a web page. HTML is used to define the structure of a web page by defining the elements of a page, such as headings, paragraphs, images, and links. JavaScript is used to add interactivity to a web page by adding event handlers to elements, such as buttons and links. For example, you can use JavaScript to add a click event handler to a button so that when the button is clicked, a certain function is executed. HTML and JavaScript are both essential languages for creating web pages. HTML is used to define the structure of a page, while JavaScript is used to add interactivity to a page. Together, they can be used to create powerful and interactive web pages.

There are many benefits to using JavaScript to create a table. Some of the most notable benefits include:

Customization: JavaScript allows you to customize the look and feel of your tables, including the size, color, and font of the text, as well as the width and height of the columns and rows.
Dynamic content: JavaScript allows you to add and remove data from your tables dynamically, without having to reload the entire page. This can be useful for creating tables that display real-time data, such as stock prices or weather forecasts.
Interactivity: JavaScript allows you to add interactivity to your tables, such as the ability to sort and filter the data, or to add links to other pages. This can make your tables more user-friendly and engaging.

Overall, JavaScript is a powerful tool that can be used to create tables that are both informative and visually appealing.

JS Output w/ jquery

A Tech Talk on outputs using HTML and Javascript. This uses jquery for easy onscreen interaction and filtering.

JS Output w/ jquery • 21 min read

Markdown Table

HTML Table

HTML Table with JavaScript jquery

Hacks

Hacks