어떻게 하시겠습니까 : 테이블 또는 CSS?

program tip

어떻게 하시겠습니까 : 테이블 또는 CSS?

radiobox 2020. 10. 30. 07:53

어떻게 하시겠습니까 : 테이블 또는 CSS?

_{(출처 : sontag.ca )}

파트 I

이 레이아웃은 2 개의 HTML 테이블을 사용하여 매우 간단하게 수행 할 수 있습니다. 하나는 다른 테이블 안에 중첩되거나 하나의 테이블로도 가능합니다.

CSS로도 할 수 있지만 조금 더 생각 이 필요할 수 있습니다 .

이것은 실제 레이아웃이 아닐 수도 있지만 비슷한 페이지를 보았습니다. 이것을 수수께끼로 생각하십시오. CSS 기술을 강화하는 연습입니다.

좀 더 흥미롭게 만들기 위해 저는 The Challenge 라는 2 부작 웹 페이지에 질문을 구성했습니다 . 우리는 코드와 질문을 조사 할 것입니다 : 레이아웃과 테이블 또는 CSS? , 나란히, 날카롭게, 우리의 두 상대가 코드 우위를 차지하기 위해 싸우고 있습니다.

1 부에서는 The Challenge 가 어떻게 생겨 났는지 설명 합니다. 즐기시기 바랍니다.

파트 II는 결정 입니다. 당신은 놀랄지도 모릅니다 .

파트 II

게시한지 몇 분만에 정말 좋은 답변이 얼마나 빨리 나타 났는지 놀랐습니다 . 겸손한 경험이었습니다. 나는 당신과 타임 트라이얼에서 경쟁하고 싶지 않습니다.

그러나 제공되는 솔루션을 면밀히 검토 한 결과, 제공된 테이블 솔루션만큼 CSS 솔루션 (당시 제 자신의 솔루션 포함)이 작동하지 않는다는 것을 깨달았습니다. 문제는 CSS가 모든 레이아웃 솔루션에 대해 표보다 더 나은 점이었습니다 .

그래서 3 개의 새 규칙을 추가했습니다 (규칙 중 하나는 규칙을 변경할 수 있다는 것입니다). 이것은 일부 사람들을 짜증나게했습니다. 그래서 규칙이 변경된 이유에 대한 다채로운 설명을 추가했습니다. 나는 이것이 그들을 더 짜증나게한다고 생각한다.

우리 정원에는 울타리가 있어야합니다. 어떤 음울한 환경과 구별 될 수있는 무언가; 너무 비싸지는 않지만 청소하기 쉽습니다. 그래서 정원 주위에 1 픽셀의 검은 색 테두리를 원합니다.
각 정원 플롯 (캐릭터)의 주민들은 정원에서 가장 좋은 것을 보여주는 것에 따라 검은 색 또는 흰색이어야합니다. 또한 그들은 모두 필기체 하강입니다. 이탤릭체가 없습니다. ;-)
정원은 재배치 가능합니다. 즉, 페이지의 어느 곳에서나이 정원을 가질 수 있습니다 (절대 위치 없음).

최종 출력은 다음과 같습니다 (배경색 선택 사항).

_{(출처 : sontag.ca )}

변덕스럽고 마지막 순간에 규칙이 변경되어 죄송합니다. 나는 틀렸다. 각 정원 구획의 주민들은 장인, 수공예 전문가입니다. 그들은 필기체 가족의 후손이며 , 이탤릭체에 그들의 스타일 감각을 빚지고 있습니다.

두 종류의 정원 (테이블과 CSS) 이 같은 페이지에 공존 해야하므로 정원을 재배치 할 수 있어야 합니다. 나는 position:absolute규칙이 허용되지 않는다고 말하는 것이 틀릴 수 있습니다 . 이러한 맥락에서 작동하도록 할 수 있다면 더 많은 힘을 얻을 수 있습니다. 그들은 확실히 받아 들여질 것입니다.

나는 각 정원 유형이 우리가 자라는 일부 꽃의 색과 매우 유사한 주황색 배경을 가진 시골에 심을 것이기 때문에 플롯 주변에 울타리를 요청했습니다.

저는 지금 네덜란드에 살고 있으며 튤립 시즌이 빠르게 다가오고 있습니다. 다음 몇 주 안에 네덜란드를 날아가고 맑은 날 (여기서는 드물지만)이면 아래의 풍경이이 어리석은 운동과 다소 비슷해 보일 것입니다.

나는 오렌지에 열광하지 않지만 네덜란드를 좋아하고 존경합니다. 그래서 우리는 오렌지 배경을 가지고 있고, 제 호스트 국가에 대한 경의를 표합니다. :-)

파트 III

나는 이 이미지와 함께 아래의 도전에서 Ted의 표 답변 을 게시했습니다.

_{(출처 : sontag.ca )}

거주자는 CSS 규칙을 건드리지 않고도 정원 플롯에 쉽게 추가 할 수 있기 때문에 모든 것이 자동으로 중앙에 배치됩니다.

CSS로 이것을 할 수 있습니까 ? 청어와 함께 숲에서 가장 강력한 나무를자를 수 있습니까?

업데이트 : 찰리의 대답이 여기 있습니다.

업데이트 : 최종 편집. STRICT DTD로 전환하고, 질문의 이미지와 일치하도록 기울임 꼴을 제거하고, 질문에 대한 OP 주석에 따라 의도를 표시하기 위해 ID의 풀 컬러 이름으로 되돌리고, CSS의 ID 이름의 기본 열을 표시되는 순서로 정렬했습니다. html에서.

또한 외부 div를 흰색 7 사각형으로 재사용하지 않기로 결정했습니다 ( 이전 편집 에서 자체 div 가 없음). 레이아웃을 사용하려는 경우 실용적이지 않았고 속임수처럼 느껴졌습니다 (간결성 / 픽셀 완벽한 관점에서 볼 때 나는 그 뺨을 좋아했습니다).

여기에서보기 : http://jsbin.com/efidi
여기에서 편집 : http://jsbin.com/efidi/edit
XHTML 엄격한 유효성 검사

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div     { text-align: center; width:175px; height:175px; line-height: 35px;}
div div {         float:left; width: 35px; height: 35px;}
#orange, #maroon,
#blue  , #green  {float:right;}

#orange, #silver {background-color:silver;  width:140px;}
#navy  , #maroon {background-color:maroon; height:140px; line-height:140px;}
         #navy   {background-color:navy  ;}
#green , #red    {background-color:red   ;  width: 70px;}
#yellow, #blue   {background-color:blue  ; height: 70px; line-height: 70px;}
         #yellow {background-color:yellow;}
         #white  {background-color:white ;}
         #green  {background-color:green ;}
         #orange {background-color:orange;}
</style> 
</head> 
<body> 
  <div> 
    <div id="silver">1</div> 
    <div id="maroon">2</div> 
    <div id="navy"  >3</div> 
    <div id="red"   >4</div> 
    <div id="blue"  >5</div> 
    <div id="yellow">6</div> 
    <div id="white" >7</div>
    <div id="green" >8</div> 
    <div id="orange">9</div> 
  </div>
</body></html>

제쳐두고 : 가능하다면 조금 더 공백을 넣을 수 있지만 여기에있는 코드 블록이 스크롤바를 얻기 시작하기 전에 한계에 도달했고 모든 것이 화면에 나타나도록 선택했습니다.

참고 : 저는 Tyson (올바른 렌더링 답변을 가장 먼저받은 사람) 에게서 line-height수정 사항을 빌 렸습니다 .

여기에 세 가지 해결책이 있습니다.

마크 업 :

<div id="outer">
    <div id="a1">1</div>
    <div id="a2">2</div>
    <div id="a3">3</div>
    <div id="a4">4</div>
    <div id="a5">5</div>
    <div id="a6">6</div>
    <div id="a7">7</div>
    <div id="a8">8</div>
    <div id="a9">9</div>
</div>

기본 스타일 시트 (크기 및 색상) :

#outer {
    width: 20em;
    height: 20em;
}
#a1 {
    background-color: #C0C0C0;
    width: 80%;
    height: 20%;
}
#a2 {
    background-color: #800000;
    width: 20%;
    height: 80%;
}
#a3 {
    background-color: #000080;
    width: 20%;
    height: 80%;
}
#a4 {
    background-color: #FF0000;
    width: 40%;
    height: 20%;
}
#a5 {
    background-color: #0000FF;
    width: 20%;
    height: 40%;
}
#a6 {
    background-color: #FFFF00;
    width: 20%;
    height: 40%;
}
#a7 {
    background-color: #FFFFFF;
    width: 20%;
    height: 20%;
}
#a8 {
    background-color: #008000;
    width: 40%;
    height: 20%;
}
#a9 {
    background-color: #FFA500;
    height: 20%;
    width: 80%;
}

그리고 이제 포지셔닝 :

사용 float:

#a1 {
    float: left;
}
#a2 {
    float: right;
}
#a3 {
    float: left;
}
#a4 {
    float: left;
}
#a5 {
    float: right;
}
#a6 {
    float: left;
}
#a7 {
    float: left;
}
#a8 {
    float: right;
}
#a9 {
    float: right;
}

사용 position:

#outer {
    position: relative;
}
#outer div {
    position: absolute;
}
#a1 {
    top: 0;
    left: 0;
}
#a2 {
    top: 0;
    right: 0;
}
#a3 {
    top: 20%;
    left: 0;
}
#a4 {
    top: 20%;
    left: 20%;
}
#a5 {
    top: 20%;
    right: 20%;
}
#a6 {
    top: 40%;
    left: 20%;
}
#a7 {
    top: 40%;
    left: 40%;
}
#a8 {
    bottom: 20%;
    right: 20%;
}
#a9 {
    bottom: 0;
    right: 0;
}

사용 margin:

#a1 {
}
#a2 {
    margin: -20% -80% 0 80%;
}
#a3 {
    margin: -60% 0 0 0;
}
#a4 {
    margin: -80% -20% 0 20%;
}
#a5 {
    margin: -20% -60% 0 60%;
}
#a6 {
    margin: -20% -20% 0 20%;
}
#a7 {
    margin: -40% -40% 0 40%;
}
#a8 {
    margin: 0 -40% 0 40%;
}
#a9 {
    margin: 0 -20% 0 20%;
}

여기 있습니다-테이블 태그의 오용이 제공 할 수있는 것보다 줄이 적습니다.

<img
    src="http://sontag.ca/TheChallenge/tiles.gif"
    alt="nine assorted coloured rectangles"
/>

:피

이것은 수직 및 수평 중앙 텍스트를 포함하여 테이블 예제와 정확히 일치합니다 (지금까지 아무도 수행하지 않음).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Boxy Boxes in a Box</title>

    <style type="text/css" media="screen">
        #container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; }

        .box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}

        #box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
        #box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
        #box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
        #box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
        #box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
        #box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
        #box_7 {top: 70px; left: 70px; background-color: white;}
        #box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
        #box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
    </style>
</head>

<body>
    <div id="container">
        <div id="box_1" class="box">1</div>
        <div id="box_2" class="box">2</div>
        <div id="box_3" class="box">3</div>
        <div id="box_4" class="box">4</div>
        <div id="box_5" class="box">5</div>
        <div id="box_6" class="box">6</div>
        <div id="box_7" class="box">7</div>
        <div id="box_8" class="box">8</div>
        <div id="box_9" class="box">9</div>
    </div>
</body>
</html>

너비와 높이가 일정하다면 항상 절대 위치를 사용하여 동일한 효과를 얻을 수 있습니다. 입력 할 필요가 없도록 충분히 분명해야합니다 (여기 늦었고 게으르다 : P)

지금까지 본 "id everything"솔루션과는 약간 다른 접근 방식을 취했습니다. 이것은 테이블 기반 솔루션보다 100 자 미만으로 제공됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
    position:absolute;
    width:35px;
    height:35px;
    text-align:center;
    line-height:35px
}

.spiral { width:175px; height:175px }

.t { top:0 }
.l { left:0 }
.r { right:0 }
.b { bottom:0 }
.w { width:140px }
.h { height:140px; line-height:140px }
.c {
    top:35px;
    left:35px;
    width:105px;
    height:105px
}

.c .w { width:70px }
.c .h { height:70px; line-height: 70px }
.c .c { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
    <div class="t l w" style="background-color:silver">1</div>
    <div class="t r h" style="background-color:maroon">2</div>
    <div class="b l h" style="background-color:navy">3</div>
    <div class="c">
        <div class="t l w" style="background-color:red">4</div>
        <div class="t r h" style="background-color:blue">5</div>
        <div class="b l h" style="background-color:yellow">6</div>
        <div class="c">7</div>
        <div class="b r w" style="background-color:green">8</div>
    </div>
    <div class="b r w" style="background-color:orange">9</div>
</div>
</body>
</html>

편집 : 수정 사항에 따라 검정색 테두리를 추가하고 일부 텍스트를 흰색으로 설정하며 "정원"을 절대적으로 배치하지 않는 약간 더 장황하지만 더 명확한 솔루션을 게시하고 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
    position:absolute;
    width:35px;
    height:35px;
    text-align:center;
    line-height:35px
}

div.spiral {
    position:relative;
    width:175px;
    height:175px;
    border: 1px solid #000
}

.top { top:0 }
.left { left:0 }
.right { right:0 }
.bottom { bottom:0 }
.wide { width:140px }
.tall { height:140px; line-height:140px }
.center {
    top:35px;
    left:35px;
    width:105px;
    height:105px
}

.center .wide { width:70px }
.center .tall { height:70px; line-height: 70px }
.center .center { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
    <div class="top left wide" style="background-color:silver">1</div>
    <div class="top right tall" style="background-color:maroon">2</div>
    <div class="bottom left tall" style="background-color:navy;color:#fff">3</div>
    <div class="center">
        <div class="top left wide" style="background-color:red">4</div>
        <div class="top right tall" style="background-color:blue">5</div>
        <div class="bottom left tall" style="background-color:yellow">6</div>
        <div class="center">7</div>
        <div class="bottom right wide" style="background-color:green">8</div>
    </div>
    <div class="bottom right wide" style="background-color:orange">9</div>
</div>
</body>
</html>

단일 테이블 솔루션.

이제 저에게 투표하지 마십시오.

나는 이것이 원래 질문에 대한 답이 아니라는 것을 알고 있습니다. OP 가 원래 질문에 대한 의견에서 요청
했기 때문에이 답변을 게시했습니다 .

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-language" content="en" />
        <title>The Challenge</title>
    </head>
    <body>

        <table cellspacing="0" cellpadding="0" border="0" summary="">
            <tr>
                <td colspan="4" height="35" align="center" bgcolor="silver"><i>1</i></td>
                <td rowspan="4" width="35" align="center" bgcolor="maroon"><i>2</i></td>
                <td rowspan="5" valign="bottom"><img src="http://sontag.ca/gif/grinch.gif" width="41" height="122" alt="Dr. Suess's Grinch"/></td>
            </tr><tr>
                <td rowspan="4" width="35" align="center" bgcolor="navy"><i>3</i></td>
                <td colspan="2" height="35" align="center" bgcolor="red"><i>4</i></td>
                <td rowspan="2" width="35" align="center" bgcolor="blue"><i>5</i></td>
            </tr><tr>
                <td rowspan="2" width="35" align="center" bgcolor="yellow"><i>6</i></td>
                <td width="35" height="35" align="center"><i>7</i></td>
            </tr><tr>
                <td colspan="2" height="35" align="center" bgcolor="green"><i>8</i></td>
            </tr><tr>
                <td colspan="4" height="35" align="center" bgcolor="orange"><i>9</i></td>
            </tr>
        </table>

    </body>
</html>

유효한 XHTML 1.0 Transitional이며 Dr. Suess 캐릭터를 포함했습니다. :)

스트립으로 Dr. Suess character는 <?xml선언의 meta-tags와 summary속성 당신은 929 개 문자로 잘라 여전히 유효한 XHTML 1.0 변형 될 수있다.

편집하다

요청에 따라 XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>The Challenge</title>
        <style type="text/css">
            BODY {background: orange}
            #garden {border: 1px solid black; color: black}
            #garden TD {
                font: italic 100% 'Comic Sans MS', cursive;
                height: 35px;
                padding: 0;
                text-align: center;
                width: 35px
            }
            #c1 {background: silver}
            #c2 {background: maroon; color: white}
            #c3 {background: navy;   color: white}
            #c4 {background: red}
            #c5 {background: blue;   color: white}
            #c6 {background: yellow}
            #c7 {background: white}
            #c8 {background: green;  color: white}
            #c9 {background: orange}
        </style>
    </head>
    <body>

        <table id="garden" cellspacing="0">
            <tr>
                <td id="c1" colspan="4">1</td>
                <td id="c2" rowspan="4">2</td>
            </tr><tr>
                <td id="c3" rowspan="4">3</td>
                <td id="c4" colspan="2">4</td>
                <td id="c5" rowspan="2">5</td>
            </tr><tr>
                <td id="c6" rowspan="2">6</td>
                <td id="c7">7</td>
            </tr><tr>
                <td id="c8" colspan="2">8</td>
            </tr><tr>
                <td id="c9" colspan="4">9</td>
            </tr>
        </table>

    </body>
</html>

공백이 아닌 문자 970 개, 주황색 배경, Dr. Suess의 Grinch가 삭제되었습니다.

여기에 아무도 아직 테이블 솔루션을 제공하지 않았으며, The Challenge는 통제 된 (심하게 편향된) 시나리오에서 CSS 레이아웃을 테이블 기반 레이아웃과 비교하는 것입니다.

여기에 Ted의 테이블 레이아웃 솔루션과 그의 도전이 있습니다.

"내 테이블 기반 솔루션을 사용하면 HTML 마크 업에만 아주 간단한 추가를 통해 정원 플롯에 새 거주자를 추가하는 것이 매우 쉽습니다. 모든 거주자는 자동으로 가운데에 배치되고 즐거운 스타일로 간격을 둡니다. 예 :"

_{(출처 : sontag.ca )}_{(출처 :}_sontag.ca₎

"내가 말할 수있는 한, 여기에있는 CSS 기반 솔루션은 CSS 규칙을 대대적으로 개조하지 않고서는 새로운 거주자를 수용 할 수 없습니다."

"돈 많이 가져 오는 게 좋을거야. 지금 정말 배고프고 목이 말라."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Terrible Ted's Table Layout</title>
<style type="text/css">

#master TD { text-align: center }
#master { 
  border: 1px solid black;
  font: italic 100%/200% 'Comic Sans MS', cursive; 
}
#silver { background-color:silver }
#maroon { background-color: maroon;  color:white }
#navy { background-color:navy;  color:white }
#red { background-color: red }
#blue { background-color:blue;  color:white }
#yellow { background-color: yellow }
#green { background-color:green;  color:white }
#orange { background-color:orange }
#white { background-color:white }

#silver, #red, #green, #orange, #white { height: 35px }
#maroon, #navy, #blue, #yellow, #white { width: 35px }

</style>
</head>
<body style="background-color:#ffb600">

<table id="master" border="0" cellpadding="0" cellspacing="0" 
  summary="layoutByTable"><tr>
    <td id="silver" colspan="2" > 1 </td> 
    <td id="maroon" rowspan="2" > 2 </td>
  </tr><tr>
  <td id="navy" rowspan="2" > 3 </td>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" 
      summary="inner"><tr>
        <td id="red" colspan="2" > 4 </td>
        <td id="blue" rowspan="2" > 5 </td>
      </tr><tr>
        <td id="yellow" rowspan="2" > 6 </td>
        <td id="white"> 7 </td>
      </tr><tr>
        <td id="green" colspan="2" > 8 </td>
      </tr>
    </table>
  </td>
</tr><tr>
 <td id="orange" colspan="2"> 9 </td>
</tr>
</table>

</body>
</html>

마크 업의 간결함 ....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
    .garden {
        position: relative;
        width: 175px;
        height: 175px;
        font-family: 'Comic Sans MS', cursive;
        border: 1px solid;
        color: #000;
        }
    .garden div {
        position: absolute;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        }
    .garden div:first-child {
        width: 140px;
        background: silver;
        }
    .garden div:first-child + div {
        right: 0;
        height: 140px;
        line-height: 140px;
        color: #fff;
        background: maroon;
        }
    .garden div:first-child + div + div {
        top: 35px;
        height: 140px;
        line-height: 140px;
        color: #fff;
        background: navy;
        }
    .garden div:first-child + div + div + div {
        top: 35px;
        left: 35px;
        width: 70px;
        background: red;
        }
    .garden div:first-child + div + div + div + div {
        top: 35px;
        right: 35px;
        height: 70px;
        line-height: 70px;
        background: blue;
        }
    .garden div:first-child + div + div + div + div + div {
        top: 70px;
        left: 35px;
        height: 70px;
        line-height: 70px;
        background: yellow;
        }
    .garden div:first-child + div + div + div + div + div + div {
        top: 70px;
        left: 70px;
        background: white;
        }
    .garden div:first-child + div + div + div + div + div + div + div {
        top: 105px;
        left: 70px;
        width: 70px;
        background: green;
        }
    .garden div:first-child + div + div + div + div + div + div + div + div{
        bottom: 0;
        right: 0;
        width: 140px;
        background: orange;
        }

    </style> 
</head> 
<body> 
<div class="garden"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<div>6</div> 
<div>7</div>
<div>8</div> 
<div>9</div> 
</div>
</body>
</html>

링크

이를 수행하는 방법은 여러 가지가 있음을 입증했다고 생각합니다. table태그와 CSS는 모두 실행 가능한 옵션입니다.

도전을 완료하기위한 다른 방법을 추가하는 대신, 그것이 더 쉬웠 든 더 어렵 든, 더 간단하든 더 복잡하든간에 말하고 싶습니다. HTML로 된 테이블은 테이블 형식 데이터를 표시하는 데 사용되어야합니다.

테이블 형식 데이터에 대한 테이블이 만들어집니다 .
CSS는 스타일링 / 프레젠테이션을 위해 만들어졌습니다 .

_{(출처 : sontag.ca )}
저는 HTML과 CSS를 처음 _배웠을 때 약 2 년 전에이 연습을 처음했습니다. 내 첫 번째 솔루션은 익명 컨테이너 DIV가없는 것을 제외하고는 여기에서 보는 것과 같았습니다. 그런 다음 CSS가 더 낫다는 것을 증명하기 위해 CSS를 Table과 나란히 비교 한 웹 페이지에 대한 아이디어를 얻었습니다. 그래서 저는 챌린지 페이지에서 작업 하고 게시 한 다음이 질문을 게시했습니다.

Sam Hasler 는 몇 분 안에 답변을 올렸 는데 , 정말 가까운 것 같습니다. 나는 그가 내가 가진 것보다 더 나은 해결책을 찾고 있다는 것을 알 수 있었다. 그의 모든 사업부는 순서가 맞았지만 내 사업부는 그렇지 않았습니다. Jacco 는 왜 두 개의 중첩 테이블을 사용했는지 묻는 댓글을 게시했습니다. 물론 그는 옳았다.

그래서 호머 심슨 "도우!" 바로 순간. 나는 표와 CSS에 대한 다른 질문과 답변을 읽었습니다. 누군가는 테이블이 세로로 중앙에 있다고 언급했습니다. 내 대답은 수직으로 중앙에 있지 않았지만 가능할 것이라고 생각했습니다. 결국 요점은 테이블이 할 수있는 모든 일을 더 잘하는 것입니다. 나는 그래서 나는 바보처럼 보이는, 지금 구석으로 자신을 그린 한 한 답변을 찾을 수 있습니다.

결국 (얼마나 오래되었는지 말하는 것이 부끄러움) 아래 해결책을 생각해 냈습니다. 그런 다음 나란히있는 비교 웹 페이지의 원래 개념을 이행 할 수있었습니다.

모든 작동 방식과 CSS를 사용해야하는 이유에 대한 설명입니다.

찰리의 대답 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Charlie's CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">

#outer { 
  width:175px; height:175px; 
  text-align:center; 
  font: italic 100%/200% 'Comic Sans MS', cursive;  
  border: 1px solid black;
}
#inner { width: 105px }
#outer>DIV, #inner>DIV { float:left }
#outer>DIV>DIV, #inner>DIV>DIV 
{ display: table-cell;  vertical-align: middle }
#c2 { clear: right }
#c3, #c6 { clear: left }

#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px }
#c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width:  35px }
#c2>DIV, #c3>DIV { height: 140px } 
#c1>DIV, #c9>DIV { width:  140px } 
#c5>DIV, #c6>DIV { height:  70px } 
#c4>DIV, #c8>DIV { width:   70px } 
#c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px }
#c9 { left: 35px }

#c1 { background-color: silver }
#c2 { background-color: maroon; color: white }
#c3 { background-color: navy; color: white }
#c4 { background-color: red }
#c5 { background-color: blue; color: white }
#c6 { background-color: yellow }
#c7 { background-color: white }
#c8 { background-color: green; color: white }
#c9 { background-color: orange }

/* these rules are a HACK to center vertically in IE7 */
#outer>DIV>DIV, #inner>DIV>DIV { position:relative; }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% }
#c5>DIV { top: 0% } 
#c6>DIV { top: 30% }
#c2>DIV { top: 0% }
#c3>DIV { top: 15% }

</style>
</head>
<body>

<div id="outer">
  <div id="c1"><div> 1 </div></div>
  <div id="c3"><div>3<br/>3<br/>3</div></div>
  <div id="inner">
    <div id="c4"><div> 4 </div></div>
    <div id="c5"><div> 5<br/>5 </div></div>
    <div id="c6"><div> 6 </div></div>
    <div id="c7"><div> 7 </div></div>
    <div id="c8"><div> 8 </div></div>
  </div>
  <div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div>
  <div id="c9"><div> 9 9 9</div></div>
</div>

</body>
</html>

다음은 절대 위치 지정을 사용하지 않고 테이블 셀을 사용하지 않으며 IE6-8, FF 등에서 유효한 예입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Terrible Ted's Table Layout</title>
<style type="text/css">
#box{border:1px solid #000; width:175px; height:175px; color:navy; font-family:"Comic Sans MS"; font-size:13px; font-style:italic; text-align:center;}

div {float:left}

#c1, #c3, #c4, #c7, #c8, #c9{height:35px; line-height:35px}
#c2, #c3{height:140px;line-height:140px}
#c5, #c6{height:70px; line-height:70px}

#c1, #c9{width:140px}
#c2, #c3, #c5, #c6, #c7{width:35px}
#c4, #c8{width:70px}

#c6, #c7 {margin-top:-35px}

#c1{background-color:silver}
#c2{background-color:maroon; float:right}
#c3{background-color:navy}
#c4{background-color:red}
#c5{background-color:blue}
#c6{background-color:yellow}
#c7{background-color:white}
#c8{background-color:green}
#c9{background-color:orange}

</style>
</head>
<body>
<div id="box">
<div id="c1">1</div>
<div id="c2">2</div>
<div id="c3">3</div>
<div id="c4">4</div>
<div id="c5">5</div>
<div id="c6">6</div>
<div id="c7">7</div>
<div id="c8">8</div>
<div id="c9">9</div>
</div>
</body>
</html>

참고 URL : https://stackoverflow.com/questions/636712/how-would-you-do-this-tables-or-css

'program tip' 카테고리의 다른 글

Python 프로젝트에서 단일 실행 파일 만들기 (0)	2020.10.30
IdeaVim이 포함 된 Pycharm으로 인해 키보드가 응답하지 않는 경우가 있습니다. (0)	2020.10.30
배열이있는 'for (var item in list)'가 JavaScript에서 나쁜 습관으로 간주되는 이유는 무엇입니까? (0)	2020.10.30
정렬 환경에서 각 방정식에 레이블을 지정하는 방법은 무엇입니까? (0)	2020.10.30
100 만개의 전화 번호 저장 (0)	2020.10.30

현재글어떻게 하시겠습니까 : 테이블 또는 CSS?

radiobox

어떻게 하시겠습니까 : 테이블 또는 CSS?

어떻게 하시겠습니까 : 테이블 또는 CSS?

파트 I

파트 II

파트 III

'program tip' 카테고리의 다른 글

'program tip'의 다른글

티스토리툴바

어떻게 하시겠습니까 : 테이블 또는 CSS?

어떻게 하시겠습니까 : 테이블 또는 CSS?

파트 I

파트 II

파트 III

'program tip' 카테고리의 다른 글

'program tip'의 다른글

관련글

티스토리툴바