HTML和CSS是用于創建網頁和頁面布局的兩種基本語言。在網頁中，使用HTML和CSS可以創建各種類型的布局，包括表格布局。
下面是一個使用HTML和CSS創建一個簡單的div列表的實例。這個列表是一個包含4個無序列表項的嵌套列表，每個列表項都是一個包含一個無序列表項的嵌套列表。
```html
<!DOCTYPE html>
<html>
<head>
<title>Dive in the List</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height: 100vh;
.list {
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
.item {
margin-bottom: 20px;
padding: 10px;
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
</style>
</head>
<body>
<div class="container">
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="list">
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="list">
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
</div>
</body>
</html>
在這個例子中，我們使用了一個`div`元素來創建一個新的列表項，并使用CSS樣式來定義它的樣式。
首先，我們定義了一個`div`元素的類名`list`，并在類名上添加了一個`.item`子類。這個子類定義了列表項的樣式，包括一個水平居中的`div`元素，一個下劃線和一個空格來突出顯示列表項，一個圓角矩形來包圍列表項，以及一個背景顏色和邊框寬度。
我們還使用`flex`屬性將列表項的父元素轉換為一個`flex`容器，并使用`align-items`屬性將父元素和子元素對齊。這樣做的目的是確保列表項的垂直方向居中，而子元素的水平方向也居中。
最后，我們使用`margin`屬性將子元素向外移動20像素，以使它們顯示在父元素中。
通過使用CSS，我們可以輕松地定義一個復雜的列表布局，并且可以通過修改HTML元素的屬性來調整布局。