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