html 表格問題

html

mayyola 2018-03-31 21:17:19 ‧ 7457 瀏覽

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

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

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

weiclin iT邦高手 4 級 ‧ 2018-03-31 23:10:35 檢舉

email 通常只支援很有限的功能, 不要想用太先進的東西

mayyola iT邦研究生 2 級 ‧ 2018-04-02 10:43:21 檢舉

謝謝~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ccutmis

iT邦高手 2 級 ‧ 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放進有木馬或病毒的程式開的人不就中招了嗎._."