{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "---\n", "toc: False\n", "comments: True\n", "layout: post\n", "title: Sample IPYNB w/ table,code\n", "description: This is the interactive example for you to use as an example \n", "courses: {'compsci': {'week': 3}}\n", "type: plans\n", "---" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Markdown Table\n", "Google [markdown cheat sheet](https://www.markdownguide.org/extended-syntax/#tables) and it lead you to an outline for how to make a table.\n", "\n", "| Make | Model | Year | Color | Price |\n", "|------|-------|------|-------|-------|\n", "|Ford|Mustang|2022|Red|$35,000|\n", "|Toyota|Camry|2022|Silver|$25,00|\n", "|Tesla|Model S|2022|White|$80,000|\n", "|Cadillac|Broughan|1969|Black|$10,000|\n", "|Ford|F-350|1997|Green|$15,000|\n", "|Ford|Excursion|2003|Green|$25,000|\n", "|Ford|Ranger|2012|Red|$8,000|\n", "|Kuboto|L3301 Tractor|2015|Orange|$12,000|\n", "|Ford|Fusion Energi|2015|Green|$15,000|\n", "|Acura|XL|2006|Grey|$10,000|\n", "|Ford|F150 Lightning|2023|Grey|$70,000|" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### HTML Table\n", "Google [w3schools html table](https://www.w3schools.com/html/html_tables.asp) and it will lead you to a tutorial on how to make tables." ] }, { "cell_type": "code", "execution_count": 14, "metadata": { "vscode": { "languageId": "html" } }, "outputs": [ { "data": { "text/html": [ "\n", "

HTML Cell Output from Jupyter

\n", "\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
MakeModelYearColorPrice
FordMustang2022Red$35,000
ToyotaCamry2022Silver$25,000
TeslaModel S2022White$80,000
CadillacBroughan1969Black$10,000
FordF-3501997Green$15,000
FordExcursion2003Green$25,000
FordRanger2012Red$8,000
KubotoL3301 Tractor2015Orange$12,000
FordFusion Energi2015Guard$25,000
AcuraXL2006Grey$10,000
FordF150 Lightning2024Guard$70,000
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "\n", "

HTML Cell Output from Jupyter

\n", "\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
MakeModelYearColorPrice
FordMustang2022Red$35,000
ToyotaCamry2022Silver$25,000
TeslaModel S2022White$80,000
CadillacBroughan1969Black$10,000
FordF-3501997Green$15,000
FordExcursion2003Green$25,000
FordRanger2012Red$8,000
KubotoL3301 Tractor2015Orange$12,000
FordFusion Energi2015Guard$25,000
AcuraXL2006Grey$10,000
FordF150 Lightning2024Guard$70,000
\n", "" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## HTML Table in Markdown Cell with JavaScript jquery\n", "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.\n", "- Look at the href and src on lines inside of the lines in `` tags. This is adding code to our page from others.\n", "- Observe the `\n", " \n", " \n", "\n", "\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
MakeModelYearColorPrice
FordMustang2022Red$35,000
ToyotaCamry2022Silver$25,000
TeslaModel S2022White$80,000
CadillacBroughan1969Black$10,000
FordF-3501997Green$15,000
FordExcursion2003Green$25,000
FordRanger2012Red$8,000
KubotoL3301 Tractor2015Orange$12,000
FordFusion Energi2015Guard$25,000
AcuraXL2006Grey$10,000
FordF150 Lightning2024Guard$70,000
\n", "\n", "\n", "\n", "\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Hacks\n", "This lesson teaches you about tables. In this hack, it is important that you analze the difference in the styles of output shown. \n", "- Make your own tables, with data according to your interests.\n", "- Describe a benefit of a markdown table.\n", "- Try to Style the HTML table using w3schools.\n", "- Describe the difference between HTML and JavaScript.\n", "- Describe a benefit of a table that uses JavaScript.\n" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.10.12" } }, "nbformat": 4, "nbformat_minor": 4 }