插入多個圖像（.gif）作爲圖標，而不是背景，使用CSS插入不同的行？

Question

我必須創建一個包含電視節目廣播信息的表格，如時間表。

所以我的最上面一行是擔綱小時（下午1點| 1:30 | 2PM ...）列和左邊的列（行）功能的渠道：

一個&é ABCFAM AMC ANPL 英國廣播公司 [等...有20個這樣的。]

有一個圖標[gif格式]必須在每個頻道的名稱之前去，這個圖標表示數字。

所以我這樣做：

HTML：

<th scope="row"><img src="images/53.gif" alt="" class="channel-number">WPGH</th> 

CSS：

.channel-number { 
width: 12px; 
height: 12px; 
float: left; 
padding-left: 2px; 
padding-right: 2px; 
} 

不過，我想知道是否有與CSS做到這一點更簡單的方法。這個圖標不是背景圖片，更像是「內容」，我有20個這樣的小GIF。在CSS中我需要做些什麼才能讓它們顯示在右側，而頻道名稱顯示在左側？

這是一個非常長而且非常複雜的表格，我正在處理這個問題，這是我看起來根本無法完成的一項功能。我非常感謝任何輸入。

Answer 1

如果圖標被認爲是內容，那麼它應該在html中。這不是因爲它的圖形，它有要在CSS中處理。當然，圖像的佈局應該在那裏完成。

爲了讓圖像文字的權利，簡單地將它浮在右邊而不是左

float:right 

它會停留在表格單元格內。或者，使用絕對定位將其強制在右側，不會影響通道名稱的顯示。

另一件事：利用你的alt屬性。您可以使用圖形來顯示53號風格，但是爲了屏幕閱讀器，機器人，文本瀏覽器等，您確實需要將alt設置爲53。

搞清楚alt屬性是有道理的可能是困難的，但在這種情況下，因爲它得到:)

<th scope="row"><img src="images/53.gif" alt="53" class="channel-number">WPGH</th>