【教學】使用 HTML 表格時上方出現空白的解決方式

**ckmarkhsu** · 2006-03-07, 05:00 PM

本文轉載自 http://www.otnt.org/showthread.php?t=130

===========================================================

現象描述

不管是在 vBulletin(3.5.1) 還是 Discuz!(3.0beta3以前版本)，使用 HTML 表格都會出現表格上面一片空白的問題。Discuz! 官方也在這裡討論過這個問題。

我仔細看了一下這個問題，發現確實是 Bug，原因在於：程式傳送文章內容的時候 (vBulletin)，或者顯示文章內容的時候 (Discuz!)，並沒有為 HTML 表格代碼作特殊處理，自動會為每一行加上一個 <br> (Discuz!2.5) 或者 <br /> (vBulletin 和Discuz!3.0)，在 </td> 後面也加上了，就是這個導致了表格上面的一片空白。而且表格的行數如果越多，表格上方的空白就會越多，因為轉換成的 <br> 也越多了。

非程式解決思路和辦法

在官方未修改 Bug 以前，對這個問題我們也可以自己找到解決的辦法。既然程式要認換行，我們就把表格代碼中的換行符刪除，這樣就不會空白。

例如下面的代碼就不會引起表格上方的空白：

HTML 代碼:

<table border="1" width="100%" id="table1" bordercolorlight="#008000" cellspacing="0" cellpadding="3" bordercolordark="#FFFFFF"><tr><td>rtre</td><td>eeee</td><td>eeee</td><td>eeeee</td><td>eeee</td></tr><tr><td>eee</td><td>ee</td><td>ee</td><td>ee</td><td>eee</td></tr></table>

而下面的代碼則會引起表格上方的空白：

HTML 代碼:

<table border="1" width="100%" id="table1" bordercolorlight="#008000" cellspacing="0" cellpadding="3" bordercolordark="#FFFFFF">
	<tr>
		<td>rtre</td>
		<td>eeee</td>
		<td>eeee</td>
		<td>eeeee</td>
		<td>eeee</td>
	</tr>
	<tr>
		<td>eee</td>
		<td>ee</td>
		<td>ee</td>
		<td>ee</td>
		<td>eee</td>
	</tr>
</table>

結論
所以，對這兩種論壇程式，解決的具體方法是：
Discuz!裡：把表格代碼在 FrontPage 裡優化一下，選擇去除所有空白(如下圖)，再把表格代碼粘貼到文章裡即可。
附件 79
vBulletin裡：除了上面的辦法以外，還有一個更簡單的辦法：只要切換一下編輯器到所見即所得模式，再把表格(不是表格代碼)複製粘貼到編輯器裡即可。
樣例：http://www.otnt.org/community/showthread.php?t=281
Discuz! 和 vBulletin 該學學 Movable Type，在發帖時加上一個“Convert Line Break”的選項。

2006-03-07, 05:00 PM	#1
ckmarkhsu 論壇站長註冊日期: 2004-10-06 住址: http://www.twvbb.com 文章: 1,574	【教學】使用 HTML 表格時上方出現空白的解決方式本文轉載自 http://www.otnt.org/showthread.php?t=130 =========================================================== 現象描述不管是在 vBulletin(3.5.1) 還是 Discuz!(3.0beta3以前版本)，使用 HTML 表格都會出現表格上面一片空白的問題。Discuz! 官方也在這裡討論過這個問題。我仔細看了一下這個問題，發現確實是 Bug，原因在於：程式傳送文章內容的時候 (vBulletin)，或者顯示文章內容的時候 (Discuz!)，並沒有為 HTML 表格代碼作特殊處理，自動會為每一行加上一個 <br> (Discuz!2.5) 或者 <br /> (vBulletin 和Discuz!3.0)，在 </td> 後面也加上了，就是這個導致了表格上面的一片空白。而且表格的行數如果越多，表格上方的空白就會越多，因為轉換成的 <br> 也越多了。非程式解決思路和辦法在官方未修改 Bug 以前，對這個問題我們也可以自己找到解決的辦法。既然程式要認換行，我們就把表格代碼中的換行符刪除，這樣就不會空白。例如下面的代碼就不會引起表格上方的空白： HTML 代碼: <table border="1" width="100%" id="table1" bordercolorlight="#008000" cellspacing="0" cellpadding="3" bordercolordark="#FFFFFF"><tr><td>rtre</td><td>eeee</td><td>eeee</td><td>eeeee</td><td>eeee</td></tr><tr><td>eee</td><td>ee</td><td>ee</td><td>ee</td><td>eee</td></tr></table> 而下面的代碼則會引起表格上方的空白： HTML 代碼: <table border="1" width="100%" id="table1" bordercolorlight="#008000" cellspacing="0" cellpadding="3" bordercolordark="#FFFFFF"> <tr> <td>rtre</td> <td>eeee</td> <td>eeee</td> <td>eeeee</td> <td>eeee</td> </tr> <tr> <td>eee</td> <td>ee</td> <td>ee</td> <td>ee</td> <td>eee</td> </tr> </table> 結論所以，對這兩種論壇程式，解決的具體方法是： Discuz!裡：把表格代碼在 FrontPage 裡優化一下，選擇去除所有空白(如下圖)，再把表格代碼粘貼到文章裡即可。附件 79 vBulletin裡：除了上面的辦法以外，還有一個更簡單的辦法：只要切換一下編輯器到所見即所得模式，再把表格(不是表格代碼)複製粘貼到編輯器裡即可。樣例：http://www.otnt.org/community/showthread.php?t=281 Discuz! 和 vBulletin 該學學 Movable Type，在發帖時加上一個“Convert Line Break”的選項。