4 September 2023

JQuery/Tables

Making a Markdown Table

We can't show the actual syntax here, but this example table's construction is viewable in VSCode.

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

Making a HTML Table

Consult the example below:

%%html

<h2>HTML Cell Output from Jupyter</h2>

<!-- Body contains the contents of the Document -->
<body>
    <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>Ford</td>
                <td>Mustang</td>
                <td>2022</td>
                <td>Red</td>
                <td>$35,000</td>
            </tr>
            <tr>
                <td>Toyota</td>
                <td>Camry</td>
                <td>2022</td>
                <td>Silver</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Tesla</td>
                <td>Model S</td>
                <td>2022</td>
                <td>White</td>
                <td>$80,000</td>
            </tr>
            <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>
</body>

Using JQuery on a Markdown Table

This example's cell shows how to use JQuery on a Markdown table.

Make	Model	Year	Color	Price
Ford	Mustang	2022	Red	$35,000
Toyota	Camry	2022	Silver	$25,000
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	Guard	$25,000
Acura	XL	2006	Grey	$10,000
Ford	F150 Lightning	2024	Guard	$70,000

tags: