입니까?

저는 divs 또는 테이블을 광범위하게 사용하면서 장단점을 연구하고 읽었습니다.입니까?

간단히 말해서 테이블은 테이블 형식의 데이터에만 적합하며 오래된 방식입니다.

div는 유연성이 뛰어나고 반응 형 디자인을 유지,로드 및 구현하는 것이 더 빠릅니다.

어떤 사람들은 말할 때 나는 혼란스러워 : div의 또는 중첩 된 div의

-extensive 사용하는 나쁜 관행입니다

된 div와 CSS를 사용하여 얻을 수있는 모두를위한 테이블의

-extensive 사용 추천하지 않습니다

(1) 그래서이 두 가지 레이아웃을 달성하는 데 사용하는 것이 가장 좋습니다.

이미지 2 "이번 달":

이미지 1 "이번 주"(내가 그들을 나중에 응답 할 것이다 것을 알고)) 두 번째 질문은 달성하기 위해 div를 사용하도록 권장하는 경우 어떻게 진행하겠습니까? 매우 복잡한 레이아웃이고 div 나 deeply 중첩 된 div를 사용하지 않고서 만 솔루션으로 테이블을 만듭니다.

HTML 코드

<div id="thisWeek" class="box"> 
<table> 
<tr> 
<td><img src="images/calendar.jpg" /></td><td valign="middle"><span style="font-size:16px;">This Week</span></td> 
</tr> 
</table> 
<ul class="engage"> 
<li><a href="">Add</a></li> 
<li><a href="">More</a></li> 
</ul> 
<table id="thisWeekTable" cellspacing="0" cellpadding="0"> 
<tr><td class="select"><div class="checkbox"><input id="checkboxInput" type="checkbox" name="" value="1"><label for="checkboxInput"></label></div></td><td><p style="font-weight:bold;font-size:15px;">02</p> <p style="font-size:10px;">Sept</p></td><td width="100%">&nbsp; Zipform 6 basics</td></tr> 
<tr><td class="select"><div class="checkbox"><input id="checkboxInput2" type="checkbox" name="" value="2"><label for="checkboxInput2"></label></div></td><td><p style="font-weight:bold;font-size:15px;">13</p> <p style="font-size:10px;">Jan</p></td><td width="100%">&nbsp; Training on Paragon</td></tr> 
<tr><td class="select"><div class="checkbox"><input id="checkboxInput3" type="checkbox" name="" value="1"><label for="checkboxInput3"></label></div></td><td><p style="font-weight:bold;font-size:15px;">26</p> <p style="font-size:10px;">Feb</p></td><td width="100%">&nbsp; Planing and Goals</td></tr> 
<tr><td class="select"><div class="checkbox"><input id="checkboxInput4" type="checkbox" name="" value="1"><label for="checkboxInput4"></label></div></td><td><p style="font-weight:bold;font-size:15px;">11</p> <p style="font-size:10px;">Mar</p></td><td width="100%">&nbsp; Zipform 6 basics</td></tr> 
<tr><td class="select"><div class="checkbox"><input id="checkboxInput5" type="checkbox" name="" value="1"><label for="checkboxInput5"></label></div></td><td><p style="font-weight:bold;font-size:15px;">09</p> <p style="font-size:10px;">Nov</p></td><td width="100%">&nbsp; Training on Paragon</td></tr> 
<tr><td class="select"><div class="checkbox"><input id="checkboxInput6" type="checkbox" name="" value="1"><label for="checkboxInput6"></label></div></td><td><p style="font-weight:bold;font-size:15px;">26</p> <p style="font-size:10px;">Feb</p></td><td width="100%">&nbsp; Planing and Goals</td></tr> 

</table> 
</div>

CSS (파란색 전체 행에 강조해야 마우스 오버를 알고) :

여기
이번 주 내 코드는 당신의 도움을 주셔서 감사합니다 코드

.box { 
    position:relative; 
    width:282px; 
    height:240px; 
    background-color:#fff; 
    border: 1px solid #D8D8D8; 
    color:#808080; 
} 

.engage { 
    float:right; 
    margin-right:15px; 
    margin-top:-35px; 
} 

.engage li { 
    display:inline-block; 
    border: 1px solid #D8D8D8; 
    padding: 5px 5px 5px 5px; 
    margin-right:-5px; 
} 

.engage li a { 
    text-decoration:none; 
    color:#808080; 
    padding: 5px 5px 5px 5px; 
    margin-right:-5px; 
    margin-left:-5px; 
} 

.engage li a:hover { 
    background-color:#C9C9C9; 
    color:#fff; 
} 

#thisWeek { 
    width:220px; 
} 

#thisWeekTable p { 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-bottom:0px; 
    padding-top:0px; 
} 

.select { 
    width:60px; 
    padding-left:20px; 
} 

.checkbox { 
    width: 25px; 
    position: relative; 
} 

.checkbox label { 
    cursor: pointer; 
    position: absolute; 
    width: 15px; 
    height: 15px; 
    top: 0; 
    left: 0; 
    background: #eee; 
    border: 1px solid #ddd; 
    background-color:#fff; 
} 

.checkbox label:after { 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 9px; 
    height: 5px; 
    background: transparent; 
    top: 2px; 
    left: 2px; 
    border: 3px solid #808080; 
    border-top: none; 
    border-right: none; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.checkbox label:hover::after { 
    opacity: 0.3; 
} 

.checkbox input[type=checkbox]:checked + label:after { 
    opacity: 1; 
} 


#thisWeekTable tr:hover { 
    background-color:#7FC1E2; 
    color:#fff; 
}

01 23,516,

그리고 여기 두 번째 "이번 달"

HTML 코드

<p>This month:</p> 

<table class="classSchedule" width="100%"> 
<tr class="tableSection"> 
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png" alt="arrow"/></a></td> 
</tr> 
<tr> 
<td>$</td><td><img src="images/view.png"/></td> 
</tr> 
<tr> 
<td colspan="6" class="actionList"> 
<ul> 
<li><a href=""><div class="classWatchButton">Watch</div></a></li> 
<li><a href=""><div class="classMoreButton">Learn more</div></a></li> 
<li><a href=""><div class="classRegisterButton">Register</div></a></li> 
</ul> 
</td> 
</tr> 
</table> 

<table class="classSchedule" width="100%"> 
<tr class="tableSection"> 
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td> 
</tr> 
<tr> 
<td>$</td><td><img src="images/view.png"/></td> 
</tr> 
<tr> 
<td colspan="6" class="actionList"> 
<ul> 
<li><a href=""><div class="classWatchButton">Watch</div></a></li> 
<li><a href=""><div class="classMoreButton">Learn more</div></a></li> 
<li><a href=""><div class="classRegisterButton">Register</div></a></li> 
</ul> 
</td> 
</tr> 
</table> 

<table class="classSchedule" width="100%"> 
<tr class="tableSection"> 
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td> 
</tr> 
<tr> 
<td>$</td><td><img src="images/view.png"/></td> 
</tr> 
<tr> 
<td colspan="6" class="actionList" id="1"> 
<ul> 
<li><a href=""><div class="classWatchButton">Watch</div></a></li> 
<li><a href=""><div class="classMoreButton">Learn more</div></a></li> 
<li><a href=""><div class="classRegisterButton">Register</div></a></li> 
</ul> 
</td> 
</tr> 
</table> 

<table class="classSchedule" width="100%"> 
<tr class="tableSection"> 
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td> 
</tr> 
<tr> 
<td>$</td><td><img src="images/view.png"/></td> 
</tr> 
<tr> 
<td colspan="6" class="actionList" id="2"> 
<ul> 
<li><a href=""><div class="classWatchButton">Watch</div></a></li> 
<li><a href=""><div class="classMoreButton">Learn more</div></a></li> 
<li><a href=""><div class="classRegisterButton">Register</div></a></li> 
</ul> 
</td> 
</tr> 
</table> 

<table class="classSchedule" width="100%"> 
<tr class="tableSection"> 
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">30</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td> 
</tr> 
<tr> 
<td>$</td><td><img src="images/view.png"/></td> 
</tr> 
<tr> 
<td colspan="6" class="actionList"> 
<ul> 
<li><a href=""><div class="classWatchButton">Watch</div></a></li> 
<li><a href=""><div class="classMoreButton">Learn more</div></a></li> 
<li><a href=""><div class="classRegisterButton">Register</div></a></li> 
</ul> 
</td> 
</tr> 
</table> 

<table class="classSchedule" width="100%"> 
<tr class="tableSection"> 
<td class="color" rowspan="2"></td><td class="date" rowspan="2"><ul><li>mon</li><li class="dayNum">25</li></ul></td><td class="class" colspan="2">CCIM: Financial Tools for Commercial Real Estate </td><td class="classAddCal" rowspan="2" align="right"><a href=""><img src="images/classAddCal.png"/></a></td><td class="classAction" rowspan="2" align="right"><a href="#hide1" class="hide" id="hide1"><img class="actionCol" src="images/classArrow.png"/></a><a href="#show1" class="show" id="show1"><img class="actionCol" src="images/classExpanded.png"/></a></td> 
</tr> 
<tr> 
<td>$</td><td><img src="images/view.png"/></td> 
</tr> 
<tr> 
<td colspan="6" class="actionList"> 
<ul> 
<li><a href=""><div class="classWatchButton">Watch</div></a></li> 
<li><a href=""><div class="classMoreButton">Learn more</div></a></li> 
<li><a href=""><div class="classRegisterButton">Register</div></a></li> 
</ul> 
</td> 
</tr> 
</table>

#classBanner { 
    position:relative; 
    background-image:url(../images/classbanner.jpg); 
    background-repeat:no-repeat; 
    width:799px; 
    height:532px; 
    color:#fff; 
    margin-top:-25px; 
} 

#classCont { 
    position:relative; 
    top:100px; 
    width:411px; 
    height:437px; 
    left:10px; 
    font-size:18px; 
} 

#classCont p { 
    font-size:25px; 
    margin-bottom:10px; 
    font-weight:bold; 
} 

#calIcon { 
    width:162px; 
    height:79px; 
    border:3px solid #fff; 
    text-align:center; 
    font-weight:bold; 
    position:absolute; 
    right:0; 
    bottom:40px; 
} 

#calIcon img { 
    margin-top:10px; 
    vertical-align:middle; 
    margin-bottom:5px; 
} 

#calIcon a { 
    display: block; 
    height: 100%; 
    width: 100%; 
    text-decoration: none; 
    color:#fff; 
} 

#calIcon a:hover { 
    background-color:#666; 
} 

#classScheduleDiv { 
    position:absolute; 
    background-color:rgba(255, 255, 255, 0.6); 
    color:#4D4D4D; 
    right:35px; 
    bottom:0; 
    width:250px; 
    height:425px; 
    overflow-y:hidden; 
} 

.color { 
    background-color:#F90; 
    width:2px; 
    height:100%; 
} 

.classRegisterButton { 
    background-color:#29A5DC; 
    color:#fff; 
    max-width:65px; 
    padding: 2px 4px 2px 4px; 
    -webkit-border-radius: 4px; /* Safari & Chrome */ 
     -moz-border-radius: 4px;/* Firefox */ 
     -ms-border-radius: 4px;/* Internet Explorer */ 
     -o-border-radius: 4px;/* Opera */ 
      border-radius: 4px; 
} 


.classMoreButton { 
    background-color:#C6C6C6; 
    color:#333333; 
    max-width:65px; 
    padding: 2px 4px 2px 4px; 
    -webkit-border-radius: 4px; /* Safari & Chrome */ 
     -moz-border-radius: 4px;/* Firefox */ 
     -ms-border-radius: 4px;/* Internet Explorer */ 
     -o-border-radius: 4px;/* Opera */ 
      border-radius: 4px; 
} 

.classWatchButton { 
    background-color:#C6C6C6; 
    color:#333333; 
    max-width:65px; 
    padding: 2px 4px 2px 4px; 
    -webkit-border-radius: 4px; /* Safari & Chrome */ 
     -moz-border-radius: 4px;/* Firefox */ 
     -ms-border-radius: 4px;/* Internet Explorer */ 
     -o-border-radius: 4px;/* Opera */ 
      border-radius: 4px; 
} 

.date ul { 
    padding:0; 
    margin:0; 
} 

.date ul li { 
    list-style-type: none; 
} 

.dayNum { 
    font-size:20px; 
    font-weight:bold; 
    margin-bottom:0px; 
} 

.actionList ul { 
    margin-top:0; 
    margin-bottom:0; 
} 

.actionList ul li { 
    display:inline-block; 
} 

table.classSchedule { 
    border-top:1px solid #ADADAD; 
} 

.show { 
    display: none; 
} 
.hide:target + .show { 
    display: inline; 
} 
.hide:target { 
    display: none; 
} 

td.actionList { 
    display: none; 
} 

.hide:target ~ td.actionList { 
    display:table-cell; 
}

출처

2014-05-14 bayeast

표는 레이아웃 기간이 아닙니다. –

@Diodeus divs와 동일한 효과를 얻는 방법에 대해 설명해 주셔서 감사합니다. JSFIDDLE 1 : [링크] (http://jsfiddle.net/bayeast/WLyd8/) JSFIDDLE 2 : [링크] (http://jsfiddle.net/bayeast/NLJ62/) – bayeast

플로팅과 함께 정렬되지 않은 목록을 사용할 수 있습니다 각 LI에. 초보자를 위해 이것을보십시오 : http://alistapart.com/article/prettyaccessibleforms –

가 레이아웃을 위해 테이블을 사용하지 마십시오 CSS 코드에 대한 코드입니다. 그것들은 의미 적 의미를 가지며 그 목적을 위해 사용되어서는 안됩니다. div는 레이아웃 디자인에 사용해야하지만 핵심은이를 사용하지 않는 것입니다 (또는 언급 한대로 중첩시켜야합니다). div에 지나치게 의존하지 않고 요소를 배치하는 방법을 배워야합니다. 새로운 HTML5 블록 레벨 요소를 사용하여 레이아웃의 의미를 더 잘 나타낼 수도 있습니다. 여기에는 div와 같이 사용할 수있는 섹션, 기사 및 nav가 포함되지만 내용은 여기에 포함되어야하는 내용을 의미합니다.

레이아웃을 간단하게 유지하는 한, CSS3의 매우 강력한 위치 지정 도구 인 플렉스 박스를 살펴볼 수 있습니다. 당신은 플렉스 상자와 함께 갈 경우, 단지 그 한계의 인식 :

여기

<tr> 
    <td class="select"> 
     <div class="checkbox"> 
      <input id="checkboxInput6" type="checkbox" name="" value="1"> 
      <label for="checkboxInput6"></label> 
     </div> 
    </td> 
    <td> 
     <p style="font-weight:bold;font-size:15px;">26</p> 
     <p style="font-size:10px;">Feb</p> 
    </td> 
    <td width="100%"> 
     &nbsp; Planing and Goals 
    </td> 
</tr>

는 방법은 다음과 같습니다 http://caniuse.com/flexbox

그냥 당신이 할 수있는 방법의 예를 제공하기 위해, 여기에 HTML 마크 업 당신이 지금 가지고 있어요 내가 생각하지 않는이 작업을 수행하기 위해 테이블을 사용한다면 나는 데이터의 유형 주어진 부적절 마크 업을한다 떠날 것이다 : 이것은 당신이 지금 가지고있는 그대로 충분히 CSS를 사용하는 마크 업 스타일 그것이

<tr> 
    <td class="select"> 
     <input class="week-checkbox" id="checkboxInput6" type="checkbox" value="1"> 
     <label class="week-checkbox" for="checkboxInput6"></label> 
    </td> 
    <td> 
     <p class="week-day">26</p> 
     <p class="week-month">Feb</p> 
    </td> 
    <td> 
     <p class="week-topic">Planing and Goals</p> 
    </td> 
</tr>

. 불필요한 마크 업을 모두 제거하고 스타일 정보를 별도의 문서에 보관하므로 끊임없이 반복하지 않아도됩니다. 체크 박스를 배치하는 데 사용한 div는 div를 많이 사용하는 예입니다. 거기에는 완전히 불필요합니다. 당신은 그것없이 위치를 잡을 수 있으며 의미 론적 의미를 갖지 않습니다. 그것은 divitis라고 불리는 문제이며, 고통을받을 수있는 유일한 사람은 아니며, 그것에 관한 기사를 자유롭게 찾아 볼 수 있으므로 주위를 피하는 방법에 대한 힌트를 얻을 수 있습니다.

<ul> 
    <li class="week-select"> 
     <input class="week-checkbox" id="checkboxInput6" type="checkbox" value="1"> 
     <label class="week-checkbox" for="checkboxInput6"></label> 
     <p><span class="week-day">26</span><span class="week-month">Feb</span></p> 
     <p class="week-topic">Planing and Goals</p> 
    </li> 
... 
</ul>

을 그리고 당신은 필요에 따라 이러한 요소를 배치하는 CSS를 구성해야 할 것 : 당신은 순서가없는 목록을 사용하여 같은 일을하고 싶었

,이 같은 그것을 할 것입니다. 즉, 동일한 레이아웃을 생성 할 수있는 충분한 마크 업이 있습니다. 좋은 마크 업의 목표는 의미 있고 단순하게 유지하는 것입니다. 위치 마크 업이 너무 많으면 의미가 파손되고 이해하기 어려워집니다.

출처

2014-05-14 17:52:45 sage88

@bayeast 마크 업을 단순화하는 방법에 대한 아이디어를 제공하는 예제를 추가했습니다. – sage88

"테이블을 레이아웃 용으로 사용하지 마십시오"** 표 형식의 데이터를 표시하지 않는 한

은 정확하고 의미있는 방법이 될 것입니다. ** –

@Paulie_D하지만 테이블 형식의 데이터이며 레이아웃이 아닙니다 :) 그러나 나는 동의합니다. 위의 내 의견을 읽으면 그의 예제는 실제로 테이블 형식의 데이터이므로 테이블에서 사용하기에 적절합니다. – sage88

답변

관련 문제