標記語言——邪惡的表格?


你知道嗎?不知何時開始,使用表格居然變成充滿罪惡的舉動了?的確,以web標准編寫網頁的最大迷思就是"不要再使用表格了,永遠不要!" 聽起來表格就和瘟疫一樣必須躲開,必須密封起來丟進滿是灰塵的櫃子里,當成是網絡發展時代早期流傳下來的古董保存起來.

如此的厭惡從何而來呢? 或許一開始十分單純,至少擁有一個好的理由.很多人會理直氣壯的宣揚拋棄傳統的表格嵌套與補空gif圖片的布局方式,改用靈活的結構化的css布局方式的好處.我們可能就開始抽絲剝繭的去掉所有的表格,甚至開始頑固的堅持把所有的表格驅逐出去 — 根本不分場合.

書中稍后我們會看到css布局的方法和這樣做帶來的所有好處.但是現在我們還是先來看看如何在適當的場合—也就是標記數據列表的時候使用表格.我們會研究幾個簡單的方法是我們的數據列表變得更容易使用,更漂亮.

完全就是表格

在標記列表數據時,我們絕對沒有理由不去用表格標簽.但是等等,什么才是列表數據?這邊有一些例子:

  • 日歷
  • 電子數據表
  • 圖表
  • 時間行程表

對這些例子以及許多其他情況來說,必須使用非常復雜嚴格的css特效才能讓資料看起來像表格,或許你能想象,用巧妙的css浮動,定位所有項目之后得到的是不兼容的矛盾的結果,更別提拿掉css之后,准確讀出每筆資料大概會成為不可能完成的任務.事實上,我們不必畏懼表格—我們應該用他們設計之初的目標來使用它們.

適合所有人的表格

表格找來謾罵的原因之一是如果沒有小心使用的話會存在可用性缺陷.舉例來說:屏幕閱讀程序難以正確讀出內容,而小屏幕設備經常被用來布局的表格擾亂,但是我們有一些簡單的方法增加列表數據表格的可用性.同時建立靈活的結構,方便未來以css設定樣式.

讓我們看看 圖3-1 中的簡單示例,這是美國棒球聯賽的聯盟記錄:

圖 3-1:典型的資料表示例

也許對紅襪隊球迷來說這是非常郁悶的統計資料,不過圖3-1的卻是列表資料的完美示范.它有三個表頭(year,opponent,season record(w-l)),跟着是四年份的資料.在表格上面的是表格標題,說明了表格的內容.

標記這個資料表格的方式十分直觀,我們或許會以這樣的代碼完成這個工作:

<p align="center">Boston Red Sox World Series Championships</p>
<table>
  <tr>
     <td align="center"><b>Year</b></td>
     <td align="center"><b>Opponent</b></td>
     <td align="center"><b>Season Record (W-L)</b></td>
  </tr>
  <tr>
     <td>1918</td>
     <td>Chicago Cubs</td>
     <td>75-51</td>
  </tr>
  <tr>
     <td>1916</td>
     <td>Brooklyn Robins</td>
     <td>91-63</td>
  </tr>
  <tr>
     <td>1915</td>
     <td>Philadelphia Phillies</td>
     <td>101-50</td>
  </tr>
  <tr>
     <td>1912</td>
     <td>New York Giants</td>
     <td>105-47</td>
  </tr>
</table>

這樣顯示的結果應該和圖3-1十分相似,但是,我們可以在這個基礎上加上一些改進.

首先,我們能用更加語義化的<caption>標簽來存放"Boston Red Sox World Series Championships".<caption>標簽需要緊跟在<table>起始標簽后面,通常用來存放表格的標題或者表格資料的說明.

看上去,它更容易讓使用者看出表格的主題,同時也能夠幫助以其他方式得知網頁內容的人.

讓我們拿掉開頭的那個段落,並加入正確的<caption>:

<table>
  <caption>Boston Red Sox World Series Championships</caption>
  <tr>
     <td align="center"><b>Year</b></td>
     <td align="center"><b>Opponent</b></td>
     <td align="center"><b>Season Record (W-L)</b></td>
  </tr>
  <tr>
     <td>1918</td>
     <td>Chicago Cubs</td>
     <td>75-51</td>
  </tr>
  <tr>
     <td>1916</td>
     <td>Brooklyn Robins</td>
     <td>91-63</td>
  </tr>
  <tr>
     <td>1915</td>
     <td>Philadelphia Phillies</td>
     <td>101-50</td>
  </tr>
  <tr>
     <td>1912</td>
     <td>New York Giants</td>
     <td>105-47</td>
  </tr>
</table>

重要的是,標題必須快速傳達后面資料的主題,根據默認設置,大多數可視化瀏覽器將<caption>標簽內的文字居中顯示在表格的最上面,當然,我們稍后可以使用css來改變默認設置的樣式 — 本章的技巧延伸中會討論這個問題.事實上,現在標題位於獨特的標簽內,正好讓我們之后的修改工作變得輕松簡單.

加上摘要

另外,我們也能為<table>標簽加上summary屬性,進一步解釋這個表格的目的和內容,摘要屬性對非可視化瀏覽器尤為重要,這能幫助它們解說表格的內容.

以下是為示例表格加上摘要屬性的代碼:

<table summary="This table is a chart of all Boston Red Sox World Series wins." >
  <caption>Boston Red Sox World Series Championships</caption>
  <tr>
     <td align="center"><b>Year</b></td>
     <td align="center"><b>Opponent</b></td>
     <td align="center"><b>Season Record (W-L)</b></td>
  </tr>
  <tr>
     <td>1918</td>
     <td>Chicago Cubs</td>
     <td>75-51</td>
  </tr>
  <tr>
     <td>1916</td>
     <td>Brooklyn Robins</td>
     <td>91-63</td>
  </tr>
  <tr>
     <td>1915</td>
     <td>Philadelphia Phillies</td>
     <td>101-50</td>
  </tr>
  <tr>
     <td>1912</td>
     <td>New York Giants</td>
     <td>105-47</td>
  </tr>
</table>

表格的表頭

在建立數據表格時,善用表頭是件很重要的工作.在標記重要單元格時,我們可以發揮<th>標簽的作用,而不是使用<b>之類在顯示上暗示用戶這個單元格是重要的的顯示效果標簽.就像我們在第二章中使用標題標簽標記段落標題一樣.

可視化瀏覽器或許會以粗體居中的效果顯示<th>標簽中的內容,但是我們依然可以用<th>標簽的獨特性,稍后再給這些重要的內容加上不同的樣式,以便於存放在<td>內的一般資料及進行區別.

除顯示效果的優勢外,使用<th>標簽也能幫助非可視化瀏覽器 — 這部分我們稍后進行深入討論.

示例表格中的表頭是最上面的那一行: Year,Opponent和Season Record(W-L).我們來把剛才的顯示效果標簽替換成正確的表頭標簽:

<table summary="This table is a chart of all Boston Red Sox World Series wins.">
  <caption>Boston Red Sox World Series Championships</caption>
  <tr>
     <th>Year</th>
     <th>Opponent</th>
     <th>Season Record (W-L)</th>
  </tr>
  <tr>
     <td>1918</td>
     <td>Chicago Cubs</td>
     <td>75-51</td>
  </tr>
  <tr>
     <td>1916</td>
     <td>Brooklyn Robins</td>
     <td>91-63</td>
  </tr>
  <tr>
     <td>1915</td>
     <td>Philadelphia Phillies</td>
     <td>101-50</td>
  </tr>
  <tr>
     <td>1912</td>
     <td>New York Giants</td>
     <td>105-47</td>
  </tr>
</table>

使用<th>標簽來標記表頭單元格和圖3-1中的效果是一樣的,讓我們來看看為什么這個方法比較好:

我們不必使用額外的顯示效果標簽讓表頭突出顯示在資料內容之外.

根據默認設置,大部分可視化瀏覽器都會以粗體居中的效果展示<th>標簽中的內容.讓使用者輕易分辨出表頭和表格內容的區別.

 

由於它和<td>標簽是相對獨立的,因此我們能為表頭加上與資料內容不同的樣式.

使用表頭標簽的其他好處我們在接下去的章節中繼續討論.

表頭與數據的關系

我們可以利用headers屬性把表頭和對應的<td>中的數據關聯起來,使屏幕閱讀器能更容易為需要的人們組織表格內容.在使用了這個屬性之后,屏幕閱讀器將能更符合邏輯的讀出表格內容,而不是像平常一樣死板的從每列最左邊讀到最右邊.

我們繼續使用紅襪隊戰績表當作例子來示范使用方法.首先,我們需要為<表格中的每個<th>加上一個唯一的id,接着再為每個資料單元格加上headers屬性,對應正確的表頭.

為每個表頭加上id很簡單,就是這樣:

<table summary="This table is a chart of all Boston Red Sox World Series wins.">
  <caption>Boston Red Sox World Series Championships</caption>
  <tr>
     <th id="year">Year</th>
     <th id="opponent">Opponent</th>
     <th id="record">Season  Record (W-L)</th>
  </tr>
  <tr>
     <td>1918</td>
     <td>Chicago Cubs</td>
     <td>75-51</td>
  </tr>
  <tr>
     <td>1916</td>
     <td>Brooklyn Robins</td>
     <td>91-63</td>
  </tr>
  <tr>
     <td>1915</td>
     <td>Philadelphia Phillies</td>
     <td>101-50</td>
  </tr>
  <tr>
     <td>1912</td>
     <td>New York Giants</td>
     <td>105-47</td>
  </tr>
</table>

我們為每個表頭id選擇簡短的有描述意義的名稱,接着我們再為每個資料單元格加上適當的headers屬性,讓內容匹配正確的表頭id:

<table summary="This table is a chart of all Boston Red Sox World Series wins.">
  <caption>Boston Red Sox World Series Championships</caption>
  <tr>
     <th id="year">Year</th>
     <th id="opponent">Opponent</th>
     <th id="record">Season  Record (W-L)</th>
  </tr>
  <tr>
     <td headers="year">1918</td>
     <td headers="opponent">Chicago Cubs</td>
     <td headers="record">75-51</td>
  </tr>
  <tr>
     <td headers="year">1916</td>
     <td headers="opponent">Brooklyn Robins</td>
     <td headers="record">91-63</td>
  </tr>
  <tr>
     <td headers="year">1915</td>
     <td headers="opponent">Philadelphia Phillies</td>
     <td headers="record">101-50</td>
  </tr>
  <tr>
     <td headers="year">1912</td>
     <td headers="opponent">New York Giants</td>
     <td headers="record">105-47</td>
  </tr>
</table>

在為表頭和內容之間建立對應關系后,屏幕閱讀器可能會議這樣的方式讀出表格的每一行內容: "Year:1918,Opponent:Chicago Cubs,Season Record(W-L):75-51",比起從左到右讀出每格內容的方法來說,這樣就有意義多了.

讓每個<th>具有唯一的id還有其他的好處,我們可以使用這個辨別依據,設定特殊的css規則,在本章最后的技巧延伸終究會討論這個方法.

使用abbr屬性

在之前的示例中,或許你會覺得表頭中"Season Record (W-L)"用語音合成器來念實在太長了一些,此時,只要加上abbr屬性,我們就能縮短發音時的內容,同時又為可視化瀏覽器保留了<th>單元格中的原始文字.

<table summary="This table is a chart of all Boston Red Sox World Series wins.">
  <caption>Boston Red Sox World Series Championships</caption>
  <tr>
     <th id="year">Year</th>
     <th id="opponent">Opponent</th>
     <th id="record" abbr="Record">Season Record (W-L)</th>
  </tr>
  <tr>
     <td>1918</td>
     <td>Chicago Cubs</td>
     <td>75-51</td>
  </tr>
  <tr>
     <td>1916</td>
     <td>Brooklyn Robins</td>
     <td>91-63</td>
  </tr>
  <tr>
     <td>1915</td>
     <td>Philadelphia Phillies</td>
     <td>101-50</td>
  </tr>
  <tr>
     <td>1912</td>
     <td>New York Giants</td>
     <td>105-47</td>
  </tr>
</table>

我們加上了 abbr="Record" 后,屏幕閱讀器會讀出表頭使用簡短的版本后的"Record".

<thead>,<tfoot>和<tbody>

在這里我還想提一下三個與表格相關的標簽.它們不僅能為表格結構提供更精確的語義,同時也為css提供額外的標簽,讓你在設計表格行的樣式時不用為<tr>標簽設計那么多的class.

引用一段W3C在HTML4.01規格中對這些標簽的說明(http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3):

引用:
表格行能夠以thead,tfoot和tbody標簽分成表頭,表尾以及數目不限的表格主體.這種分類法讓瀏覽器支持獨立卷動表格主體的功能.打印長表格時,表頭和表尾也能在包含表格資料的每一頁上重復出現.

因此,使用使用這種分類方式也能讓支持獨立表格主體的瀏覽器使用者更容易閱讀表格內容,特別是長表格.

<thead>與<tfoot>必須出現在<tbody>之前,讓瀏覽器與其他設備能夠先載入這些內容,以這種表格行分類方式標記表格看起來是這樣的:

<table>
  <thead>
    <tr>
      ...table header content...
    </tr>
  </thead>
  <tfoot>
    <tr>
      ...table footer content...
    </tr>
  </tfoot>
  <tbody>
    <tr>
      ...table data row...
    </tr>
    <tr>
      ...table data row...
    </tr>
    <tr>
      ...table data row...
    </tr>
  </tbody>
</table>

你會發現,表頭和表尾資料以<thead>和<tfoot>標簽包圍,放在表格數據行之前.

就像我之前所說的那樣,這些標簽不僅能為表格提供更精確的語義,還能給css提供樣式錨點讓你為這些特定內容設置css規則,而不必為每個<tr>設計那么多的class.

舉例來說,如果我們只想給數據區塊(以<tbody>標記)設定與其他區塊不同的背景色.那么我們只需要寫這樣一段css就能達到目的:

tbody {
  background-color: gray;
  }

如果沒有tbody標簽的話,我們需要為每個想要加上灰色背景的<tr>標簽添加class屬性.有意義的標記方式經常能使之后用css設定樣式的工作變得十分輕松.這就是個好例子.

表格邪惡嗎?

我想,如果我們根據表格標簽設計之初的目的好好使用的話,那么答案就肯定是"不!".濫用表格創建復雜嵌套的布局的行為理所當然會遭到譴責,但是表格的確會給資料區塊提供它需要的良好的結構.

我們不能在整本書里都敘述創建完美表格所需要的各種技巧,因此就此打住,希望你已經開始知道如何創建簡單的又具有可用性的方便css修飾的簡單表格.

談到樣式,讓我們用幾種不同的css技巧修飾一下之前的示例.

技巧延伸

與之前章節一樣,我們用靈活的語義化的結構化的標記為基礎,然后用css給他加上一些樣式

首先,我們先來看看簡單的邊框技巧,在示例上創建單線邊框,然后我們再為表格標題和表頭加上獨特的樣式

建立邊框

已經對border默認屬性的3維效果感到厭倦了么?我也是.一般來說,為table標簽加上border="1"就會與圖3-1的效果類似,當然你也能換個方法,這邊有一個用css做出漂亮整潔邊框的訣竅.首先,我們給每個<th><td>單元格兩側(右側和底部)加上一像素的邊框:

th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

只加上兩側邊框,是建立各處邊框等寬又同時讓大部分流行的瀏覽器能夠正確顯示的關鍵所在.如果我在四周都加上邊框,那么邊框的頂部和左側會在單元格排列時造成重疊,在稍后的示例中,我會給出一種只用一條border規則就達成小童效果的方法.

 

你會發現圖3-2中的整個表格只缺少了最頂部和最左側的邊線,為了補齊邊框,我們給<table>元素加上樣式相同的border-top和border-left屬性

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

圖3-2:為th和td加上兩側邊線的表格示例

圖3-3 補齊邊線后的表格示例

去掉間隙

現在我們已經有了個完整的表格了,但是邊框之間的間隔是怎么回事?不幸的是,由於大多數瀏覽器會默認設置一點外補丁,因此就會露出這些令人討厭的間隙了.

我們能做的是為表格元素加上border-collapse屬性來去掉這些間隙,得到我們想要的樣式.

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-collapse: collapse;
  }
th, td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

在為border-collapse加上collapse屬性后,我們就能看到精確的單線邊框樣式了,如圖3-4

圖3-4:使用了border-collapse屬性后的表格示例

不支持IE for Mac的版本

除了Internet Explorer for Mac之外,其他的瀏覽器都支持把css簡寫成這樣:

table {
  border-collapse: collapse;
  }
th, td {
  border: 1px solid #999;
  }

要用哪一種方法,這當然由你來決定了,現在仍然有一些人再使用IE for Mac,而使用這個替代方法的話,會讓他們看到一些邊線的重復,如果你並不在意這件事情,那就使用簡化的辦法吧.嚴格來說,這只是個顯示上的問題,表格功能絲毫不受影響.

由於我無法棄Mac狂熱者於不顧(任何稱職的網頁設計師都應該這樣),因此再往后的示例中,我還是會用IE for Mac也能正確顯示的版本.

擴大空間

現在我們手上有了一個完美的表格,不過它看上去有點局促...讓我們為手邊的th,td規則加上一點內補丁,給它們呼吸的空間(圖3-5)

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-collapse: collapse;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }

圖3-5:加上10像素內補丁的表格示例

你知道嗎?如果用單一數值設定內補丁的話(比如之前的例子的10px),就需要給元素的四邊都加上相同的設定值,你也可以按照順時針順序(上右下左)分別指定每一邊的設定值.如果你把內部定設定為10px 5px 2px 10px的話,就會在頂部加上10px的內補丁,右側加上5px的內補丁,底部加上2px的內補丁,左側加上10px的內補丁.

另一條捷徑:如果上下的設定值相同,左右的設定值也相同的話,你就只需要分別設定一次就可以了,如果設定了padding:10px 5px的話,就會在上下部加上10px的內補丁,在左右側加上5px的內補丁.

圖3-6:順時針設定內補丁和外邊界的順序

調整表頭的顯示效果

我們可以輕松的給表頭加上背景色,選用不同的字體,讓表頭更加的明顯,由於我們是使用了<th>標簽而不是直接在行內將內容設為粗體,因此我們不必加上任何其他的標簽,就能直接為表頭內容設定樣式.

我們在標題下面也加上一點內補丁,同時還用不同的字體,顏色(當然是紅色)以突出標題內容(圖3-7)

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  background: #ccc;
  }

圖3-7:加上樣式的標題和<th>

為表頭加上背景圖片

剛才我們為表格里的<th>元素加上了灰色背景,但是我們其實可以更進一步,用背景圖平鋪在格子里來作出漂亮的效果,舉例來說,我們能用細致的灰色條紋模擬出許多Mac OS X中的窗口樣式

小圖片

首先我們用photoshop(或者其它你熟悉的繪圖工具)建立一個小圖片,在這個例子中,我們要制作一個2像素灰色和2像素白色交替出現的效果,因此圖片只需要4像素高,寬度多款都無所謂,因為它會在<th>里平鋪開來,做出我們想要的條紋效果.為了節省帶寬,我們只做1像素寬(圖3-8)

圖3-8:1X4的像素條紋圖片(放大后)

CSS

沿用剛才示例中的代碼,我們需要修改的地方只有把背景顏色換成剛制作好的小圖片路徑,除非另外制定,否則根據默認設置,背景圖會自動超每個方向平鋪.

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  background: url(th_stripe.gif);
  }

圖3 -9是套用這個樣式后的表格,表頭部分分線了條紋背景,要實驗其他的平鋪背景圖也很方便,你可以試試怎樣才能為表頭或資料做出最好看的效果,好好享受這個實驗的過程吧.

圖3-9:在表頭使用平鋪背景的示例

為ID指定圖標

記得本章開始的時候我們為表格里的每一個<th>加上唯一的ID嗎?那時我們把這些id與數據列表中的headers屬性匹配起來,幫助非可視化瀏覽器的使用者了解表格的內容,現在我們能在另一個地方發揮這個id的功能了,那就是為每個<th>指定不同的圖標.

圖標路徑會完全記錄在css文件中,讓你能夠在網站重構,更新時輕易的替換,完全不必修改標簽部分.

圖標

我用photoshop做了三個獨特的圖標,分別用在示例中每個表頭上:Year, Opponent與Season Record(W-L).圖3-10就是這三個圖標:

圖3-10hotoshop制作的三個表頭圖標

CSS

加上css並不困難,因為我們為每個<th>都制定了獨特的id,因此我們能直接用background屬性來指定正確的圖標.

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  }
#year {
  padding-left: 26px;
  background: #ccc url(icon_year.gif) no-repeat 10px 50%;
  }
#opponent {
  padding-left: 26px;
  background: #ccc url(icon_opp.gif) no-repeat 10px 50%;
  }
#record {
  padding-left: 26px;
  background: #ccc url(icon_rec.gif) no-repeat 10px 50%;
  }

你應該注意到了,我們改用簡寫方式定義了背景樣式,我們從th的定義中取出background:#ccc規則,並把它放到每個表頭的圖標名稱旁邊,這會使得我們的圖標"坐"在我們指定的灰色背景上面,我們也在每個表頭內容的左邊留夠圖標的空間,不讓文字覆蓋上去,圖3-11就是我們想要的效果:

 

圖3-11:為每個<th>制定獨特圖標的效果

使用簡寫語法有明顯的優點,然而,如果我們只以background屬性定義圖片,不定義背景色的話,就應該先取消掉先前在<th>中以background定義的背景色.

組合規則,簡化內容

能夠達到相同功能的另一種寫法,是把每個表頭里反復出現的規則(在這個例子中是背景圖片,內補丁和位置)拿出來寫在<th>定義一次就好了(因為它們的設定在每個<th>中的確都一樣),然后只在#year,#opponent,#record定義內保留各自不同的設定值(也就是圖片路徑)

table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  }
caption {
  font-family: Arial, sans-serif;
  color: #993333;
  padding-bottom: 6px;
  }
th, td {
  padding: 10px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  }
th {
  font-family: Verdana, sans-serif;
  padding-left: 26px;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  }
#year {
  background-image: url(icon_year.gif);
  }
#opponent {
  background-image: url(icon_opp.gif);
  }
#record {
  background: url(icon_rec.gif);
  }

這樣稍微簡潔一些了吧?借着整合相同規則,我們能夠省下每次重復定義修改的時間和精力,以這個例子來說,看起來只差六個,半打而已,但是對大一些的樣式表來說,節省的量就很可觀了.

總結

在本章,我們不僅發現了表格並不邪惡,同時還深入了解表格之后,我們發現,他們很適合用來標記例表數據,而且仍然易於使用

我們更發現,只要加上一些樣式,就能控制列表數據的顯示方式,讓他們變得十分具有吸引力,別再為使用表格而感到恐懼了.


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com