Happy Everyday

표만들기 본문

태그에 대해서 한번 배워볼까요?

표만들기

쿠욱키 2005. 10. 29. 18:26
이제 tag에 중요부분이라구 할수 있는 table에 대해서 배워보겠습니다. 홈페이지를 만들다 보면 table이 안 드러가는 곳이 없을정도로..또 table은 화면을 깨끗이 처리 하고자 할때 많이 쓰입니다. 그럼 아래의 내용을 한번 같이 해보시겠습니다.
Tag

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/4875332","DEFAULT_URL":"https://pshto.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875332,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "mpaoW/W4EO4A+prq38gJWMxqslZBnYhySzuqpArjClGiYScJpkykzIa65DfN8icj" }; var servicePath = ""; var blogURL = "";</script> <title>표 만들기</title> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875332"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/4875332","name":null},"url":"https://pshto.tistory.com/4875332","headline":"표만들기","description":"이제 tag에 중요부분이라구 할수 있는 table에 대해서 배워보겠습니다. 홈페이지를 만들다 보면 table이 안 드러가는 곳이 없을정도로..또 table은 화면을 깨끗이 처리 하고자 할때 많이 쓰입니다. 그럼 아래의 내용을 한번 같이 해보시겠습니다. Tag 표 만들기 표 만들기 연습 표만들기 해보세요 실행결과 표..","author":{"@type":"Person","name":"쿠욱키","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2005-10-29T18:26:40+09:00","dateModified":"2005-10-29T18:26:40+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/script/common.js"></script> </head> <body> <table> <caption>표 만들기 연습</caption> <tr> <td>표</td><td>만</td><td>들</td><td>기</td> <tr> <td>해</td><td>보</td><td>세</td><td>요</td> </table> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875332","customProps":{"userId":"0","blogId":"5625759","entryId":"4875332","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875332","entryTitle":"표만들기","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/4875332","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>
실행결과


표 만들기 연습
표 만 들 기
해 보 세 요

표가 만들어졌습니다. 그냥 봐서는 잘 모르시겠져?? 그럼..위에..글씨를 블럭잡아보세여.. 그럼..아마...연결되서 블럭잡히지 않고 따로 떨어져 있을겁니다.
위에 표는 그냥 표만 만든검니다...

<table> </table> 표만들기 시작
<caption> </caption> 표의 제목만들기(가운데정렬됨)
<tr> </tr> 한행 만들기...표 줄 바꾸기
<td> </td> 한 셀 만들기(글씨가 들어가는 공간)

앞에 이미지에서..테두리 넣을때..뭘 썼는지 기억하시져?? border=n입니다.
표에서도 마찬가지입니다. 여기서도...n이 크면 클수록 테두리가 두꺼워 지겠죠...
한번 해보져~!! ^^;;

Tag

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/4875332","DEFAULT_URL":"https://pshto.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875332,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "mpaoW/W4EO4A+prq38gJWMxqslZBnYhySzuqpArjClGiYScJpkykzIa65DfN8icj" }; var servicePath = ""; var blogURL = "";</script> <title>표 만들기</title> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875332"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/4875332","name":null},"url":"https://pshto.tistory.com/4875332","headline":"표만들기","description":"이제 tag에 중요부분이라구 할수 있는 table에 대해서 배워보겠습니다. 홈페이지를 만들다 보면 table이 안 드러가는 곳이 없을정도로..또 table은 화면을 깨끗이 처리 하고자 할때 많이 쓰입니다. 그럼 아래의 내용을 한번 같이 해보시겠습니다. Tag 표 만들기 표 만들기 연습 표만들기 해보세요 실행결과 표..","author":{"@type":"Person","name":"쿠욱키","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2005-10-29T18:26:40+09:00","dateModified":"2005-10-29T18:26:40+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/script/common.js"></script> </head> <body> <table border=1> <caption>표 만들기 연습</caption> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> </table> <table border=5> <caption>표 만들기 연습</caption> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> </table> <br> <table border=10> <caption>표 만들기 연습</caption> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> </table> <br> <table border=50> <caption>표 만들기 연습</caption> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> </table> <br> <table border=100> <caption>표 만들기 연습</caption> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> <tr> <td>표만들기</td><td>표만들기만</td><td>표만들기</td><td>표만들기</td> </table> <br> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875332","customProps":{"userId":"0","blogId":"5625759","entryId":"4875332","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875332","entryTitle":"표만들기","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/4875332","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>
실행결과

표 만들기 연습
표만들기 표만들기만 표만들기 표만들기
표만들기 표만들기만 표만들기 표만들기

표 만들기 연습
표만들기 표만들기만 표만들기 표만들기
표만들기 표만들기만 표만들기 표만들기

표 만들기 연습
표만들기 표만들기만 표만들기 표만들기
표만들기 표만들기만 표만들기 표만들기

표 만들기 연습
표만들기 표만들기만 표만들기 표만들기
표만들기 표만들기만 표만들기 표만들기

표 만들기 연습
표만들기 표만들기만 표만들기 표만들기
표만들기 표만들기만 표만들기 표만들기


표의 테두리 크기는 사용자가 정하기 따라 틀립니다. 더 크게 만드시구 싶으시면 더 크게 쓰시면 됩니다. ^^;;

'태그에 대해서 한번 배워볼까요?' 카테고리의 다른 글

표태두리색  (0) 2005.10.29
표에 색  (0) 2005.10.29
책길피  (0) 2005.10.29
body 영역  (0) 2005.10.29
링크 마무리  (0) 2005.10.29
'태그에 대해서 한번 배워볼까요?' Related Articles more