[HTML] Table (2)

티스토리 뷰

HTML

[HTML] Table (2)

Dongi 2021. 11. 13. 09:40

안녕하세요 동기 여러분! 오늘은 테이블의 테두리를 만드는 방법과 셀과 셀 사이를 가로막는 선을 박살 내는 아주 전투적인 기능에 대해 알아보겠습니다! (저는 모든 내용을 Codecademy라는 사이트에서 영어로 공부를 하고 있는데 테이블부터 아주 막히는 겁니다... 영어 실력이 아주 박살이 나서 그런가 했는데 그냥 테이블 자체가 HTML에서 가장 어렵다고 라더라구욬ㅋㅋㅋㅋㅋㅋㅋ 난 또 ㅋㅋㅋㅋ)

Table Borders

지난 시간에 만든 저의 첫 테이블입니다. 아주 처참한 모습이죠? 여기에 뼈대를 한번 세워 봐야하지 않겠습니까?

생김새

<table border="숫자"> <!-- 큰 숫자를 넣을수록 뼈대가 굵어진다.-->
  <tr>
    <td>여기는 내용</td>
    <td>여기도 내용</td>
  </tr>
</table>

예

이제 한번 테이블 다운 테이블을 한번 만들어 보겠습니다. 요즘 최애 시트콤 '왠만해선 그들을 막을 수 없다'의 노주현 가족들에 대한 테이블을 만들어 보겠습니다.

<!DOCTYPE>
<html>
  <table border="1">
    <tr>
      <th>이름</th>
      <th>배우</th>
      <th>나이</th>
      <th>직업</th>
      <th>좋아하는 것</th>
      <th>싫어하는 것</th>
    </tr>
    <tr>
      <td>노구</td>
      <td>신구</td>
      <td>75세</td>
      <td>은퇴한 사업가</td>
      <td>공짜</td>
      <td>보증</td>
    </tr>
    <tr>
      <td>노주현</td>
      <td>노주현</td>
      <td>53세</td>
      <td>소방관</td>
      <td>먹는 것</td>
      <td>노홍렬의 시비</td>
    </tr>
    <tr>
      <td>박정수</td>
      <td>박정수</td>
      <td>50세</td>
      <td>가정주부</td>
      <td>교회가기</td>
      <td>노홍렬의 깝죽거림</td>
    </tr>
    <tr>
      <td>노윤영</td>
      <td>최윤영</td>
      <td>26세</td>
      <td>동시통역사</td>
      <td>권오중</td>
      <td>선보기</td>
    </tr>
    <tr>
      <td>노영삼</td>
      <td>윤영삼</td>
      <td>17세</td>
      <td>고등학생</td>
      <td>게임, 권오중</td>
      <td>공부, 회초리</td>
    </tr>
    <tr>
      <td>노인삼</td>
      <td>윤정근</td>
      <td>13세</td>
      <td>초등학생</td>
      <td>가족</td>
      <td>운동, 불량배</td>
    </tr>
  </table>
</html>

내용은 별로 없지만 상당히 길어보이는 코드, 저는 캐나다에 살고 있는데 스타벅스 가서 이런 코드 켜놓고 커피 한잔 때리면 한글을 모르는 외국인들 입장에선 ~~제가 상당히 멋져 보일수돜ㅋㅋㅋ~~

아무튼 실행을 해보면

border에 큰 숫자를 넣을 수록 테두리가 커지는데 제가 1000까지 해봤는데 제 팔뚝 만해서 내용은 보이지도 않더라구욬ㅋㅋ

Spanning Rows

테이블을 만들다 보면 겹치는 내용들이 있죠? 그런 내용들이 있을 때 테이블을 선을 박살 내어 뚫어서 내용을 통일하는 방법이 있습니다.

첫 번째 방법은 행(Row)을 통합하는 방법입니다.

생김새

<table border="1"> 
  <tr>
    <td rowspan="숫자">여기는 내용</td> <!-- "숫자" 만큼 칸이 통합됨-->
    <td>여기도 내용</td>
    <td>역시 내용</td>
  </tr>
</table>

여기서 rowspan은 row span이고 span은 걸치다[포괄하다], 가로지르다 이런 뜻이 있습니다.

예

군대 있을 때 최애 애니메이션 블리치에 관해 테이블을 만들어 보겠습니다!

<!DOCTYPE>
<html>
  <body>
    <table border="1">
      <tr>
        <th>본명</th>
        <th>직업</th>
        <th>종족</th>
        <th>시해</th>
        <th>만해</th>
        <th>개인적 견해</th>
      </tr>
      <tr>
        <td>쿠로사키 이치고</td>
        <td>고교생, 사신대행, 이후 번역가</td>
        <td>사신 + 인간</td>
        <td>참월</td>
        <td>천쇄참월</td>
        <td>파오케가 유행했던 시절 피시방 소음 주범</td>
      </tr>
      <tr>
        <td>야마모토 겐류사이 시게쿠니</td>
        <td>전 호정 13대 총대장</td>
        <td>사신</td>
        <td>류인약화</td>
        <td>잔화태도</td>
        <td>할부지 복근 간지 폭풍</td>
      </tr>
      <tr>
        <td>소이퐁</td>
        <td>호정 13대 2번대 대장</td>
        <td>사신</td>
        <td>작봉</td>
        <td>작봉뇌공편</td>
        <td>뜬금없는 포 사격과 약한 대장...</td>
      </tr>
      <tr>
        <td>이치마루 긴</td>
        <td>전 호정 13대 3번대 대장</td>
        <td>사신</td>
        <td>신창</td>
        <td>신살창</td>
        <td>믿고 있었다구! 긴짱</td>
      </tr>
      <tr>
        <td>우노하라 레츠</td>
        <td>전 호정 13대 4번대 대장</td>
        <td>사신</td>
        <td>육우삽</td>
        <td>개진</td>
        <td>반전이 매력적인 대장!</td>
      </tr>
      <tr>
        <td>아이젠 소스케</td>
        <td>전 호정 13대 5번대 대장</td>
        <td>사신</td>
        <td>경화수월</td>
        <td>불명</td>
        <td>블리치의 조미료</td>
      </tr>
      <tr>
        <td>쿠치키 뱌쿠야</td>
        <td>호정 13대 6번대 대장</td>
        <td>사신</td>
        <td>천본앵</td>
        <td>천본앵경엄</td>
        <td>시해와 만해가 너무 멋있음</td>
      </tr>
      <tr>
        <td>히츠가야 토시로</td>
        <td>호정 13대 10번대 대장</td>
        <td>사신</td>
        <td>빙륜환</td>
        <td>대홍련빙륜환</td>
        <td>이치고와 함께 피시방 소음 주범</td>
      </tr>
      <tr>
        <td>자라키 켄파치</td>
        <td>호정 13대 11번대 대장</td>
        <td>사신</td>
        <td>야쇄</td>
        <td>불명</td>
        <td>켄파치 보고 푸시업 더 빡세게함</td>
      </tr>
      <tr>
        <td>쿠로츠치 마유리</td>
        <td>호정 13대 12번대 대장</td>
        <td>사신</td>
        <td>소쇄지장</td>
        <td>금색소쇄지장</td>
        <td>프리저 목소리 넘 져아</td>
      </tr>
    </table>
  </body>
</html>

기억이 안나는 대장들은 제외 했습니다 ㅎㅎ

이 코드를 실행 해보면 아래와 같이 나오는데요,

종족에 보면 이치고를 제외한 나머지 대장들이 전부 사신입니다. 그럼 이 행에 줄을 박살내서 뚫어 보겠습니다.

총 9칸을 뚫어 주어야 하기 때문에

야마모토 겐류사이 시게쿠니 부터 뚫어주면 되겠습니다. 여기서 주의 할점은 아래 대장들의 "사신"이라는 정보를 지워주지 않으면 칸이 다 밀려 버립니다.

총 9칸을 뚫어주면 되니까 rowspan="9" 작성을 해주고 나머지 대장들의 "사신" 정보를 지워 줍니다.

마지막으로 실행 모습입니다.

어때요? 정말 쉽죠?

오늘의 느낌

다음 시간에 열(Columns)을 뚫는 방법과 테이블 바디에 대해 알아봅시다! 그럼 20000

'HTML' 카테고리의 다른 글

[HTML] Table (4) (0)	2021.11.15
[HTML] Table (3) (0)	2021.11.14
[HTML] Table (1) (0)	2021.11.12
[HTML] Comments (0)	2021.11.11
[HTML] Linking to Same Page (0)	2021.11.11

공지사항

동기 코딩 연락처

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

Dongi_coding 동기_코딩

티스토리 뷰

[HTML] Table (2)

Table Borders

생김새

예

Spanning Rows

생김새

예

오늘의 느낌

'HTML' 카테고리의 다른 글

티스토리툴바