iT邦幫忙

1

html 表格問題

各位大大好:
https://www.w3schools.com/code/tryit.asp?filename=FPWAQD1QVEO3
1.我用html做了一個小表格,想請問當右邊字數多的時候,左邊的圖跟圖的間隔會越分越大
請問要怎麼讓圖一致向上對齊跟圖與圖的間隔不隨字數而變寬?

2.此網頁用瀏覽器看,我如果講它調到圖跟文字左右長度對齊,但經過郵件寄信,像是用gmail看或outlook看,變成圖往上擠,文章落落長,左右高度相差很大
想請問有甚麼方法或語法解決,html尺吋改用百分比的時候,瀏覽器放大縮小版型很容易跑掉,不知道為甚麼。

3.想再請問用iframe嵌入影片到gmail或outlook看,這種方式好像是禁止的是嗎?
謝謝/images/emoticon/emoticon02.gif

weiclin iT邦高手 4 級 ‧ 2018-03-31 23:10:35 檢舉
email 通常只支援很有限的功能, 不要想用太先進的東西
mayyola iT邦新手 2 級 ‧ 2018-04-02 10:43:21 檢舉
謝謝~

2 個回答

1
ccutmis
iT邦高手 10 級 ‧ 2018-04-01 22:54:01
最佳解答

A1:以你附的html看出表格圖文的排列大概是像下列這樣:

|-------|
| 圖 | 文 |
|----   |
| 圖 |   |
|----   |
| 圖 |   |
|-------|

以目前這方式排當然會有文的長度變高後,把第二個tr圖往下押的現象,
(其實是因為左邊三個td沒有指定高度,右邊的文變多之後,
左邊三個td的高度會自動均分,但強制指定td高度也不是好解法)
總之如果要讓它按照你說的方式,右邊內文長度變高,不會影響左邊圖片,
那表格排法可以這樣排:

|-------|
| 圖 | 文 |
| 圖 |   |
| 圖 |   |
|-------|

範例html Demo:
http://www.web3d.url.tw/hots/test20180401.htm

<!DOCTYPE html>
<html>
<head>
<title>Just a test</title>
<meta charset="UTF-8" /></head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="width:636px;margin:0 auto;">
<tr>
<td style="vertical-align:top;">
<img style="width:250px;margin-top:20px;" src="https://p2.bahamut.com.tw/HOME/creationCover/98/0002942698_B.JPG" />
<br/>
<img style="width:250px;margin-top:20px;"src="http://farm6.staticflickr.com/5488/10995530513_8811c40289.jpg" />
<br/>
<img style="width:250px;margin-top:20px;" src="https://p2.bahamut.com.tw/HOME/creationCover/98/0002942698_B.JPG" />
</td>
<td style="vertical-align:top;padding:10px;padding:20px;padding-top:10px;">
<p>沈黙の夜凪に 漂った小さな船は
体中 傷を背負った 旅人のせたゆりかごになった
悲しげなその寝顔は もう誰も寄せ付けないそぶり
ここが今どこか知らずに 北へ 北へただ向かう
</p>
<p>つないだはずの その手がほどけていく
君はまるで はじめから “愛されること”ができないみたいだ
</p>
<p>いつだって 途惑って 帰ることもできなくなって
「助けて」って叫んでるだけで 届かなくて 悲しくて
「僕は一人だ…」
そんなこともう言わせない
</p>
<p>沈黙の夜凪に 漂った小さな船は
体中 傷を背負った 旅人のせたゆりかごになった
悲しげなその寝顔は もう誰も寄せ付けないそぶり
ここが今どこか知らずに 北へ 北へただ向かう
</p>
<p>つないだはずの その手がほどけていく
君はまるで はじめから “愛されること”ができないみたいだ
</p>
<p>いつだって 途惑って 帰ることもできなくなって
「助けて」って叫んでるだけで 届かなくて 悲しくて
「僕は一人だ…」
そんなこともう言わせない
</p>
<p>沈黙の夜凪に 漂った小さな船は
体中 傷を背負った 旅人のせたゆりかごになった
悲しげなその寝顔は もう誰も寄せ付けないそぶり
ここが今どこか知らずに 北へ 北へただ向かう
</p>
<p>つないだはずの その手がほどけていく
君はまるで はじめから “愛されること”ができないみたいだ
</p>
<p>いつだって 途惑って 帰ることもできなくなって
「助けて」って叫んでるだけで 届かなくて 悲しくて
「僕は一人だ…」
そんなこともう言わせない
</p>
</td>
</tr>
</table>
<div style="background:#ccc;padding:10px;text-align:center;">
::::グラフィックソースはインターネットからのものです::::
</div>
</body>
</html>

要用在電子報上面的CSS,在HTML標籤(tag)以style="..."方式編寫比較不會發生問題,
(以前接觸過電子報設計的經驗)。
例如:
<img style="width:250px;margin-top:20px;"..... />
這段css語法讓 img寬度強制調為250px(高度會自動依比例延伸),且上邊界為20px,

其它自己體會了,建議不要用美工常用工具編輯html(例如dreamweaverX photoshop XX ILLU XXX),
你要在腦子裡架構它長怎樣,頂多用紙畫架構,例如前面舉的例子:
|-------|
| 圖 | 文 |
| 圖 |   |
| 圖 |   |
|-------|
先把要作的架構畫出來,然後用記事本或文字編輯工具(notepad++ sublime Text 等等),直接編輯html碼,這樣訓練自己日積月累就會有所成長,希望有幫助^_^"

====

另外在Outlook等軟體裡面開啟電子報,iframe被禁是很合理的,因為安全性的議題。如果開電子報會直接載入iframe內容的話,那想搞破壞的人在iframe放進有木馬或病毒的程式開的人不就中招了嗎._."

看更多先前的回應...收起先前的回應...
mayyola iT邦新手 2 級 ‧ 2018-04-02 10:43:13 檢舉

謝謝cc大分享~受益良多~~

mayyola iT邦新手 2 級 ‧ 2018-04-02 18:30:24 檢舉

cc大,若我將此網頁用郵件寄送到我信箱,然後用outlook2016收信,banner圖會縮小,且不會置中,想請問是甚麼問題呢? 但網頁看都正常 謝謝
https://www.w3schools.com/code/tryit.asp?filename=FPYHLQWFM0PE

ccutmis iT邦高手 10 級 ‧ 2018-04-02 19:49:18 檢舉

這給你參考看看:
https://www.w3schools.com/code/tryit.asp?filename=FPYJZML1UGCN

我沒有用outlook故沒法測試,只是把一些html簡化,跟寬高有關的就寫在style裡面,table或div容器標籤常見的置中語法就是"margin:0 auto;",若是容器裡面的文字置中則常用到"text-align:center;"

mayyola iT邦新手 2 級 ‧ 2018-04-03 11:55:30 檢舉

cc大感謝~可以用了~

WilliamHuang
iT邦研究生 1 級 ‧ 2018-04-01 10:04:30
【**此則訊息已被站方移除**】

我要發表回答

立即登入回答