## 測試排版：
* 程式碼並排測試一 (會隨螢幕寬度彈性縮放)：
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1">
Python範例：

import time
import pandas as pd
def greet(name):
    print(f"Hello, {name}!")
greet("Alice")

</div>
<div style="flex: 1">
SQL範例：

create table schema.table (
    col1 integer,
    col2 varchar(100)
);
select * from table;
select col1, col2 from schema.table;

</div>
<div style="flex: 1">
Java Script範例：

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("Alice");

</div>
</div>

---
* 程式碼並排測試二 (不會隨螢幕寬度彈性縮放)：
<div style="display: flex; gap: 20px;">
<div style="flex: 1">
Python範例：

import time
import pandas as pd
def greet(name):
    print(f"Hello, {name}!")
greet("Alice")

</div>
<div style="flex: 1">
SQL範例：

create table schema.table (
    col1 integer,
    col2 varchar(100)
);
select * from table;
select col1, col2 from schema.table;

</div>
<div style="flex: 1">
Java Script範例：

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("Alice");

</div>
</div>

---
* 程式碼並排測試三 (限制程式碼區塊的高度與寬度，並啟用捲軸)：
<div style="display: flex; gap: 20px;">
<div style="flex: 1; width: 100%; height: 200px; overflow: auto; background: #f9f9f9; padding: 10px;">
Python範例：

import time
import pandas as pd
def greet(name):
    print(f"Hello, {name}!")
greet("Alice")

</div>
<div style="flex: 1; width: 100%; height: 200px; overflow: auto; background: #f9f9f9; padding: 10px;">
SQL範例：

create table schema.table (
    col1 integer,
    col2 varchar(100)
);
select * from table;
select col1, col2 from schema.table;

</div>
<div style="flex: 1; width: 100%; height: 200px; overflow: auto; background: #f9f9f9; padding: 10px;">
Java Script範例：

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("Alice");

</div>
</div>

---
* 程式碼並排測試四 (目前使用的樣板，僅限制寬度，並啟用捲軸)：

<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1 1 500px; overflow: auto; padding: 10px;">
SQL 範例 1：

select col1, col2, col3
from table
where key1 = 'value1' and key2 = 'value2'
and col1 between 1 and 1000
order by col1, col2;

</div>

<div style="flex: 1 1 500px; overflow: auto; padding: 10px;">
Python 方法 1-1：資料來源為 CSV 檔案，且使用 pandas

import pandas as pd

# 讀取整個 CSV 檔案
# 可加上 usecols=['col1', 'col2', 'col3'] 限制讀取欄位，或加上 encoding='utf-8-sig' 設定編碼，並建議加上：dtype=str, low_memory=False
df = pd.read_csv('table.csv')

# 篩選符合條件的列，選取特定欄位，並依 col1 與 col2 排序
result = df.loc[(df['key1'] == 'value1') & (df['key2'] == 'value2') & df['col1'].between(1, 1000)][['col1', 'col2', 'col3']].sort_values(by=['col1', 'col2'])
print(result)
# print(df.loc[(df['key1'] == 'A') & (df['key2'] == 'I'), 'col1'])  # 取出滿足該條件的 col1 欄位

</div>

<div style="flex: 1 1 500px; overflow: auto; padding: 10px;">
Python 方法 1-2：資料來源為 CSV 檔案，且使用原生 Python 結構 (list[dict])

import csv

with open('table.csv', newline='') as csvfile:  # 可加上 encoding='utf-8-sig' 設定編碼
    reader = csv.DictReader(csvfile)

    # 篩選條件：key1 = 'value1' 且 key2 = 'value2' 且 col1 between 1 and 1000
    filtered = [
        {'col1': row['col1'], 'col2': row['col2'], 'col3': row['col3']}
        for row in reader
        if row['key1'] == 'value1' and row['key2'] == 'value2' and int(row['col1']) >= 1 and int(row['col1']) <= 1000
    ]

# 排序依 col1, col2
result = sorted(filtered, key=lambda x: (x['col1'], x['col2']))

print(result)

</div>
</div>

---