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

<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>
le>
</body>

HTML Cell Output from Jupyter

le> </body> ## HTML Table in Markdown Cell 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 `` tags. This is adding code to our page from others. - Observe the `
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
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
## 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. ```python %%html

NFL Player Statistics

NFL Player Statistics

Player Name Team Position Touchdowns Passing Yards
Patrick Mahomes Kansas City Chiefs Quarterback 40 5097
Derrick Henry Tennessee Titans Running Back 17 2027
DeAndre Hopkins Arizona Cardinals Wide Receiver 6 1407
Aaron Donald Los Angeles Rams Defensive Tackle 0 N/A
Stephon Gilmore New England Patriots Cornerback 0 N/A
Lamar Jackson Baltimore Ravens Quarterback 36 2757
Christian McCaffrey Carolina Panthers Running Back 6 374
Julio Jones Tennessee Titans Wide Receiver 3 771
J.J. Watt Arizona Cardinals Defensive End 2 N/A
Tom Brady Tampa Bay Buccaneers Quarterback 40 4633
Aaron Rodgers Green Bay Packers Quarterback 37 4059
Alvin Kamara New Orleans Saints Running Back 16 932
Travis Kelce Kansas City Chiefs Tight End 11 1459
```

NFL Player Statistics

NFL Player Statistics

Player Name Team Position Touchdowns Passing Yards
Patrick Mahomes Kansas City Chiefs Quarterback 40 5097
Derrick Henry Tennessee Titans Running Back 17 2027
DeAndre Hopkins Arizona Cardinals Wide Receiver 6 1407
Aaron Donald Los Angeles Rams Defensive Tackle 0 N/A
Stephon Gilmore New England Patriots Cornerback 0 N/A
Lamar Jackson Baltimore Ravens Quarterback 36 2757
Christian McCaffrey Carolina Panthers Running Back 6 374
Julio Jones Tennessee Titans Wide Receiver 3 771
J.J. Watt Arizona Cardinals Defensive End 2 N/A
Tom Brady Tampa Bay Buccaneers Quarterback 40 4633
Aaron Rodgers Green Bay Packers Quarterback 37 4059
Alvin Kamara New Orleans Saints Running Back 16 932
Travis Kelce Kansas City Chiefs Tight End 11 1459