SKIP TO CONTENT

CSVからWebアプリへ

beginner~15 0/4 ステップ

CSVからWebアプリへ

データのクエリはもうできます。SQLでのスライスもできます。次は、それを見せる方法を学びましょう。

スプレッドシートの中の表は世界からは見えません。ブラウザに表示された表はプロダクトです。このレッスンでは、ソート可能なヘッダー、色分けされた行、合計行を備えたインタラクティブなHTMLデータダッシュボードをゼロから作ります。PythonもPandasも不要。HTMLとTailwindだけです。

手順

1

<h1> でダッシュボードのタイトルを追加しましょう — どんなデータを表示していますか?

ヒント: 例: `<h1 class="text-2xl font-bold text-white">プロダクト分析</h1>`

2

3つ以上の列ヘッダー (<th>) を含む <thead> 付きの <table> を追加しましょう

3

4行以上のデータ行 (<tr>) を持つ <tbody> を追加しましょう — 実際にありそうな数値を入れてください

4

一番下に合計行を追加しましょう: 各列の合計を太字で示す <tr class="summary-row">

あなたのコード

html
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

ライブプレビュー

ライブプレビュー