코드 여행 일기

주요 태그 2 <표> 본문

HTML

주요 태그 2 <표>

할짝개발자 2023. 7. 13. 00:09
728x90
반응형

 

 

<table>

<td>

<!--td 테이블 데이터-->
<!--tr 테이블 로우(그룹핑)-->

<html>
<head><meta charset="utf-8"></head>
<body>
<table>
        <td>이름</td>     <td>성별</td>   <td>주소</td>
        <td>최진혁</td>  <td>남</td>      <td >청주</td>
        <td>최유빈</td>  <td>여</td>      <td>청주</td>
</table>
</body>
</html>

 

결과

 

<td> 코드만 적용 했을 경우

<tr>

<!--td 테이블 데이터-->
<!--tr 테이블 로우(그룹핑)-->

<html>
<head><meta charset="utf-8"></head>
<body>
<table>
    <tr>
        <td>이름</td>     <td>성별</td>   <td>주소</td>
    </tr>
    <tr>
        <td>최진혁</td>  <td>남</td>      <td >청주</td>
    </tr>
    <tr>
        <td>최유빈</td>  <td>여</td>      <td>청주</td>
    </tr>
</table>
</body>
</html>

 

결과

 

<td><tr> 코드만 적용 했을 경우

<table border="2">

<!--td 테이블 데이터-->
<!--tr 테이블 로우(그룹핑)-->

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <tr>
        <td>이름</td>     <td>성별</td>   <td>주소</td>
    </tr>
    <tr>
        <td>최진혁</td>  <td>남</td>      <td >청주</td>
    </tr>
    <tr>
        <td>최유빈</td>  <td>여</td>      <td>청주</td>
    </tr>
</table>
</body>
</html>

 

결과

 

<td><tr><border="2"> 코드 적용 했을 경우

<thead>

<tbody>

<tfoot>

<!--td 테이블 데이터-->
<!--tr 테이블 로우(그룹핑)-->
<!--<th> 테이블 해드(그룹핑)-->

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td >청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>청주</td> <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>  <td></td>      <td></td> <td>1500</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

 

결과

 

<rowspan="숫자"> 수직 평합

<colspan="숫자"> 수평 평합

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td rowspan="2">청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">합계</td>      <td>1500</td>
        </tr>
    </tfoot>
 
</table>
</body>
</html>

 

결과

 

 

 

위 글은 생활코딩 영상을 정리하여 쓴 글 입니다.

728x90
반응형

'HTML' 카테고리의 다른 글

주요 태그 3 <입력 양식 4>  (0) 2023.07.24
주요 태그 3 <입력 양식 3>  (0) 2023.07.24
주요 태그 3 <입력 양식 2>  (0) 2023.07.24
주요 태그 3 <입력 양식 1>  (0) 2023.07.15
주요 태그 1 <p> <br> <img>  (1) 2023.07.12
'HTML' Related Articles more