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

<!-- Head contains information to Support the Document -->
<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 contains the contents of the Document -->
<body>
    <table id="demo" 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>

<!-- Script is used to embed executable code -->
<script>
    $("#demo").DataTable();
</script>

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

<!DOCTYPE html>
<html>
<head>
    <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>
    <div id="table-container"></div>

    <script>
        class F1Driver {
            constructor(name, team, number, nationality) {
                this.name = name;
                this.team = team;
                this.number = number;
                this.nationality = nationality;
            }

            getName() {
                return this.name;
            }

            getTeam() {
                return this.team;
            }

            getNumber() {
                return this.number;
            }

            getNationality() {
                return this.nationality;
            }

            setTeam(newTeam) {
                this.team = newTeam;
            }
        }

        async function fetchData() {
          const url = 'https://f1-live-motorsport-data.p.rapidapi.com/drivers/2020';
          const options = {
            method: 'GET',
            headers: {
              'X-RapidAPI-Key': '9275b62a1fmsh3b832340dafb492p1abc77jsn58ef554feee6',
              'X-RapidAPI-Host': 'f1-live-motorsport-data.p.rapidapi.com'
            }
        
        }

        async function createDriverObjects() {
          const data = await fetchData();

          if (data && data.length > 0) {
            let drivers = [];
        
            // Iterate over the data and create driver objects
            for (const item of data) {
              const driver = new F1Driver(
                item["driver_name"],
                item["team_name"],
                item["driver_id"],
                item["nationality"],
              );
              drivers.push(driver);
            }
        
            return drivers;
          }
        }

        async function generateTable() {
            const drivers = await createDriverObjects();

            if (drivers && drivers.length > 0) {
                const table = $("<table>");
                const headers = ["Name", "Team", "Number", "Nationality"];

                // Create table header
                const headerRow = $("<tr>");
                for (const header of headers) {
                    const th = $("<th>").append($("<button>").text(header).click(sortTable.bind(null, header.toLowerCase())));
                    headerRow.append(th);
                }
                table.append(headerRow);

                // Create table rows with driver data
                for (const driver of drivers) {
                    const row = $("<tr>");
                    const rowData = [
                        driver.getName(),
                        driver.getTeam(),
                        driver.getNumber(),
                        driver.getNationality(),
                    ];
                    for (const data of rowData) {
                        const cell = $("<td>").text(data);
                        row.append(cell);
                    }
                    table.append(row);
                }

                // Append the table to the container element
                $("#table-container").append(table);
            }
        }

        function sortTable(column) {
            const table = $("table");
            const rows = table.find("tr").slice(1); // Exclude the header row
            const columnIndex = ["name", "team", "number", "nationality"].indexOf(column);

            rows.sort((a, b) => {
                const aValue = $(a.cells[columnIndex]).text();
                const bValue = $(b.cells[columnIndex]).text();
                return aValue.localeCompare(bValue, undefined, { numeric: true, sensitivity: "base" });
            });

            table.find("tr:gt(0)").remove();
            table.append(rows);
        }

        // Example usage
        generateTable();
    </script>
</body>
</html>

<!DOCTYPE html>

Troubleshooting

  • Issue: Code not compiling
    • Potential fixes: remove full dom
    • Potential fixes: fix setup