HTML Table

Here is a HTML Table!

%%html

<h2>HTML Cell Output from Jupyter</h2>
<!-- Styling-->
<head>
<style>
    table {
        border-collapse: collapse;
        width:100%
        }
    tr:nth-child(even) {
        background-color: rgba(86, 26, 116, 0.4);
          }
         
    th:nth-child(even),td:nth-child(even) {
        background-color: rgba(22, 26, 105, 0.4);
          }
</style>
</head>
<!-- Body contains the contents of the Document -->
<body>
    <table class="table">
        <thead>
            <tr>
                <th>Breed</th>
                <th>Height (in)</th>
                <th>Weight (lbs)</th>
                <th>Origin</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Golden Retriever</td>
                <td>20</td>
                <td>55</td>
                <td>Scotland</td>
                <td>$2,500</td>
            </tr>
            <tr>
                <td>German Shepherd</td>
                <td>23</td>
                <td>49</td>
                <td>Germany</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>Border Collie</td>
                <td>18</td>
                <td>27</td>
                <td>Scotland</td>
                <td>$700</td>
            </tr>
            <tr>
                <td>Labrador Retriever</td>
                <td>22</td>
                <td>25</td>
                <td>United Kingdom</td>
                <td>$1,500</td>
            </tr>
            <tr>
                <td>Husky</td>
                <td>20</td>
                <td>35</td>
                <td>Siberia</td>
                <td>$1,000</td>
            </tr>
            <tr>
                <td>Corgi</td>
                <td>10</td>
                <td>20</td>
                <td>Wales</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>Charles Spaniel</td>
                <td>12</td>
                <td>14</td>
                <td>United Kingdom</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>Dalmation</td>
                <td>22</td>
                <td>35</td>
                <td>Croatia</td>
                <td>$500</td>
            </tr>
            <tr>
                <td>Goldendoodle</td>
                <td>18</td>
                <td>45</td>
                <td>Australia</td>
                <td>$6,000</td>
            </tr>
            <tr>
                <td>Bulldog</td>
                <td>13</td>
                <td>40</td>
                <td>England</td>
                <td>$3,000</td>
            </tr>
            <tr>
                <td>Rottweiler</td>
                <td>23</td>
                <td>80</td>
                <td>Rome</td>
                <td>$70,000</td>
            </tr>
        </tbody>
    </table>
</body>

HTML Cell Output from Jupyter

Breed Height (in) Weight (lbs) Origin Price
Golden Retriever 20 55 Scotland $2,500
German Shepherd 23 49 Germany $2,000
Border Collie 18 27 Scotland $700
Labrador Retriever 22 25 United Kingdom $1,500
Husky 20 35 Siberia $1,000
Corgi 10 20 Wales $2,000
Charles Spaniel 12 14 United Kingdom $2,000
Dalmation 22 35 Croatia $500
Goldendoodle 18 45 Australia $6,000
Bulldog 13 40 England $3,000
Rottweiler 23 80 Rome $70,000

HTML Table in Markdown Cell with JavaScript jquery

Here is a table we made about different breeds of dogs!

Breed Height (in) Weight (lbs) Origin Price
Golden Retriever 20 55 Scotland $2,500
German Shepherd 22-24 49 Germany $2,000
Border Collie 18 27 Scotland $700
Labrador Retriever 22 25 United Kingdom $1,500
Husky 20 35 Siberia $1,000
Corgi 10 20 Wales $2,000
Charles Spaniel 12 14 United Kingdom $2,000
Dalmation 22 35 Croatia $500
Goldendoodle 18 45 Australia $6,000
Bulldog 13 40 England $3,000
Rottweiler 23 80 Rome $70,000

Hacks

  • A benefit of a markdown table is that you can see the table in its entirety on a markdown page (instead of only the code if it was on Python).
  • HTML is the basic structure of a website while Javascript adds the dynamic content to the websites. For example, HTML is the language you use to add text while Javascript is what makes the text interactive.
  • A benefit of using a Javascript table is that it’s more interactive and allows you to find things eaiser by filtering information.