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.