# 如何設定 VS2008 讓 HTML 在格式化排版時不要破壞版面

有許多網頁設計師還是習慣用 Table 進行網頁版面配置，但各位應該知道在 IE 下， 只要 HTML 的 <img> 標籤與表格儲存格 </td> 之間只要有一個空白字元出現，就會導致網頁版面跑掉「一點點」，有時後就是這「一點點」讓套版人員抓狂。

我們在 Visual Studio 中若使用「格式化文件(Format Document)」功能進行 HTML 排版，預設的情況下，就會導致網站破版，以致於我們很少在 HTML 格式下進行排版作業。

如下圖例是尚未格式化的表格 HTML 原始碼：

 ![尚未格式化的表格 HTML 原始碼](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/0077cb74f8fa0f6579e0-image_23.png "尚未格式化的表格 HTML 原始碼")

經過 Visual Studio 排版(Ctrl + E + D)後變成如下圖這樣，雖然比較漂亮，但在 IE 下看卻會破版：

![經過 Visual Studio 排版後的HTML](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/c15f15aade5f3cf4154b-image_20.png "經過 Visual Studio 排版後的HTML")

我今天就教各位修改 Visual Studio 中的設定，讓你以後再自動格式化文件時不會再破壞版面了。

以下是設定的步驟：

1\. 工具 –> 選項 –> Text Editor –> HTML –> Format –> Tag Specific Options

[![工具 –> 選項 –> Text Editor –> HTML –> Format –> Tag Specific Options](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/d7c36753e8ff7516163b-image_thumb.png "工具 –> 選項 –> Text Editor –> HTML –> Format –> Tag Specific Options")](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/db864cc9d5f5897e2685-image_2.png)

2\. Client HTML Tags –> New Tag... 並新增 img 標籤(Tag)

![Client HTML Tags –> New Tag...](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/e6ab67d99dec41260635-image_5.png "Client HTML Tags –> New Tag...")

![New Tag -> img](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9b8457ceefe00ec2814b-image_8.png "New Tag -> img")

3\. 把 Line breaks 切換到 None 即可，你也可以看到 Preview 欄位的預覽效果。

![Client HTML Tags –> img  –> Line breaks –> None](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/0b2b2f2a9d5aaeb0f9f0-image_11.png "Client HTML Tags –> img  –> Line breaks –> None")

4\. 接著修改 td 標籤的設定，並切換到 Before, after opening, and after closing 即可。

![Client HTML Tags –> td  –> Line breaks –> Before, after opening, and after closing](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f3761d752dd8d3f081e1-image_14.png "Client HTML Tags –> td  –> Line breaks –> Before, after opening, and after closing")

\---

設定完成後，就可以直接試著格式化文件看看。如下圖就是修改選項後進行格式化的結果：

![修改選項後進行格式化的結果](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/e82d91a82891d128e1f6-image_26.png "修改選項後進行格式化的結果")

以後就可以放心格式化文件了。

### 特別提醒

-   對於已經進入 Production 階段的專案，切勿再使用「格式化文件」功能，以免造成 Code Reviewer 的困擾！