dl標籤與table標籤

2021-07-26 16:05:45 字數 1269 閱讀 8817

table資料列表

傳統table的資料列表**如下所示。我們要為每行新增tr標籤，然後還要在其中為標題和資料各加乙個td標籤，由於標籤都是td，想要新增樣式的話還要為每個td新增class屬性。



class="title">name:td>


class="text">squall litd>


tr>


class="title">age:td>


class="text">23td>


tr>


class="title">gender:td>


class="text">maletd>


tr>


class="title">day of birth:td>


class="text">26th may 1986td>


tr>


tbody>


table>
以下是相應的css**，我們為之前在html中宣告的class新增樣式。

/*table list data*/


table


table


tr.title


table


tr.text
從以上**可以看出，使用table標籤，如果想使用css來對內容進行修飾或修改的話，需要為td單元格新增一些相應的class屬性。這樣無形中增加了自己的工作量，**會稍微變多了一些。**變多意味著什麼？意味著**的流量在浪費、增加更多的產生bug的機率以及後期維護更困難。

dl、dt、dd資料列表

現在讓我們來看看使用了html dl、dt、dd標籤的資料列表。首先我們使用dl(definition list-自定義列表)標籤來容納整個資料結構，然後我們使用dt(自定義標題)標籤和dd(自定義描述)標籤來容納資料中的標題和內容。



name: dt>


squall lidd>


age: dt>


23dd>


gender: dt>


maledd>


day of birth:dt>


26th may 1986dd>


dl>
而在css**中，我們僅需讓dt和dd向左浮動即可。

/*dl, dt, dd tags list data*/


dldl


dtdl


dd
從dl、dt、dd的例項中你應該能明顯的看出它們的**更簡潔更平滑更符合語義化了吧。

table標籤與列表標籤

table tr td th 屬性 table width 寬度 height 高度 align 水平對齊方式 left center right border 設定 的變寬，以px 畫素 為單位 cellpadding 內邊距 單元格邊框與內容之間的距離 cellspacing 外邊距 單元格與單...

詳述table標籤

我們常常會使用到excle 可以非常直觀的 建立 操作 刪除 資料 如下圖 那麼如何在html檔案中建立乙個 呢？html 由table 標籤以及乙個或多個tr th或td標籤組成 table 標籤用來定義 整個 包含在 和標籤中 tr標籤用來定義 中乙個 行，它是單元格的容器，每行可以包含有多個單...

table標籤的屬性

標籤定義 html 簡單的 html 由 table 元素以及乙個或多個 tr th 或 td 元素組成。tr 元素定義 行，th 元素定義表頭，td 元素定義 單元。更複雜的 html 也可能包括 caption col colgroup thead tfoot 以及 tbody 元素。在 htm...