[HTML] table 태그 예제

예제 1

<!DOCTYPE html>
<html>
<head>
    <title>회원가입</title>
</head>
<body>
    <form method="post" action="JSPTTest5Result.jsp">
        <table border="1">
            <caption>회원가입</caption>
            <tr>
                <td><label for="name">이름 </label></td>
                <td> <input type="text" name="name" id="name" required></td>
            </tr>
            <tr>
                <td><label for="id">아이디 </label></td>
                <td> <input type="text" name="id" id="id" required></td>
            </tr>
            <tr>
                <td><label for="pw">비밀번호 </label></td>
                <td> <input type="password" name="pw" id="pw" required></td>
            </tr>
            <tr>
                <td><label for="pw2">비밀번호 확인 </label></td>
                <td> <input type="password" name="pw2" id="pw2" required></td>
            </tr>
            <tr>
                <td><label for="email">이메일 </label></td>
                <td> <input type="email" name="email" id="email" required></td>
            </tr>
            <tr>
                <td>취미 </td>
                <td>
                    <input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">독서</label>
                    <input type="checkbox" name="hobby" value="cooking" id="cooking"><label for="cooking">요리</label>
                    <input type="checkbox" name="hobby" value="running" id="running"><label for="running">조깅</label>
                    <input type="checkbox" name="hobby" value="swimming" id="swimming"><label for="swimming">수영</label>
                    <input type="checkbox" name="hobby" value="sleeping" id="sleeping"><label for="sleeping">취침</label>
                </td>
            </tr>
            <tr>
                <td>전공 </td>
                <td>
                    <input type="radio" name="major" value="Korean" id="Korean" required><label for="Korean">국어</label>
                    <input type="radio" name="major" value="English" id="English"><label for="English">영어</label>
                    <input type="radio" name="major" value="Math" id="Math"><label for="Math">수학</label>
                    <input type="radio" name="major" value="Design" id="Design"><label for="Design">디자인</label>
                </td>
            </tr>
            <tr>
                <td><label for="mobileCarrier">전화번호</label> </td>
                <td>
                    <select name="mobileCarrier" id="mobileCarrier">
                        <option value="SKT">SKT</option>
                        <option value="KT">KT</option>
                        <option value="LG">LG</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="submit"><input type="submit" value="전송"> <input type="reset" value="초기화"></td>
            </tr>
        </table>
    </form>
</body>
</html>

예제 2

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다.

기본값 : separate
border-collapse: separate | collapse | initial | inherit

- separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
- collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.

사용예
table { border-collapse: collapse; }

text-align :
속성 값들 center, right, left

.textCenter{ text-align: center; }

'HTML > Day37' 카테고리의 다른 글

[CSS] CSS 예제 (0)	2021.12.27
[CSS] CSS 설명 예시 (0)	2021.12.26

예제 1

예제 2

'HTML > Day37' 카테고리의 다른 글

티스토리툴바