본문 바로가기
아이콘

반응형 표 만들기 코드

Tomsasa      조회 수 426 2026.04.04 


<table style="width: 100%; max-width: 900px; min-width: 100px; background-color: #f8f8f8; border: 1px solid #e0e0e0; border-collapse: separate; border-spacing: 0; border-radius: 10px; margin: 20px auto; overflow: hidden;">
    <tr>
        <td style="padding: 20px; color: #333; line-height: 1.6; text-align: left; border: none;">
            <!-- 이 곳에 내용을 입력하세요 -->
            여기에 내용을 입력하세요. 폭에 따라 자동으로 조절되며 모서리가 둥근 회색 박스 형태입니다.
        </td>
    </tr>
</table>


반응형 표 (표 안쪽셀 여백 )

<table style="width: 100%; max-width: 900px; min-width: 280px; background-color: #f8f8f8; border: 1px solid #e0e0e0; border-collapse: separate; border-spacing: 0; border-radius: 10px; margin: 0; overflow: hidden; table-layout: fixed;">

    <tr>

        <td style="padding: 10px 5px 10px 15px; color: #333; line-height: 1.6; text-align: left; border: none; word-break: break-all;">

            <!-- 이 곳에 내용을 입력하세요 -->

        </td>

    </tr>

</table>


게시판 상단용 (이미지용)
<table style="width: 100%; max-width: 900px; min-width: 100px; margin: 0 auto; border: 0px solid #ccc; border-collapse: collapse;">
  <tr>
    <td>
<!--타이틀 start -->
<table>
  <tr>
    <td>
<!--이미지 넣는 위치-->
<div style="display: flex; align-items: center; font-size: 20px; font-weight: bold;"> 
    <img src="https://URL" alt="아이콘" style="margin-right: 8px;">
</div>
</td>
  </tr>
</table>
<!--타이틀 end -->
<br>
 <tr>
    <td style="padding: 5px; border: none; text-align: left;"> 
<!--게시판이 상단 이미지 보다 적게 설정-->
<!--게시판 시작-->
내용
<!--게시판 끝-->
</td>
  </tr>
</table>

이런 코드가 필요한 이유는 , 다양한 기기에서 홈페이지를 보는데, 
각 환경에 따라  반응형 게시글을 만들기 위하여 사용하는 코드 입니다.

모서리가 둥근 사각형에 이미지 넣기 (가로 최대: 900px 최소: 280px) 
<center>
<table style="width: 100%; max-width: 900px; min-width: 280px; background-color: #f8f8f8; border: 1px solid #e0e0e0; border-collapse: separate; border-spacing: 0; border-radius: 10px; margin: 0; overflow: hidden; table-layout: fixed;">
    <tbody><tr>
        <td style="padding: 0px; color: #333; line-height: 1.6; text-align: left; border: none; word-break: break-all;">
            <!-- 이 곳에 내용을 입력하세요 -->
<a href="https://URL"><img src="https://URL.png" alt="이미지" width="1024" height="328" editor_component="image_link" /></a>
        </td>
    </tr>
</tbody></table></center>
이 게시물을

List of Articles
번호 제목 조회 수
26 테스트 글 new  
25 유그린 나스 DOCKER 에 설치된 XE1 로그인 에러 문제 해결하기 118
24 유그린 NAS 업데이트 이후 XE1 파일 첨부 에러 170
23 유그린 NAS , Docker 에 XE3 게시글 카운트 에러 문제 update 283
22 유그린 NAS , Docker 에 XE3 설치했을경우, 첨부파일 늘리는 방법 257
21 XE3 사이트 모바일 확대 안되는 문제 해결 하기 343
20 XE1 첨부파일 증발 현상 356
19 XE3 에서 폴더 권한 변경이 안될때 해결하기 file 323
18 유그린 NAS 의 보안 강화로 XE1 권한 설정 문제 322
17 XE1 쉬운설치가 안될때 해결하기 273
16 NAS 에서 사용하던 HDD 를 윈도우에서 사용하기 248
15 가로 선 색 넣기 545
» 반응형 표 만들기 코드 426
13 XE1 Board defaultou 스킨 상단 메뉴배경색 설정 413
12 UG NAS 에 xe1 설치후 문제 해결하기 file 541