HTML

HTML Tables

carrot62 2020. 7. 23. 00:39

웹 페이지에서 데이터를 행과 열로 효율적으로 정리할 수 있도록 해준다.

  • <table>
  • <tr> : 하나의 행을 정의한다
  • <th>: table header (보통 굵은 글씨로 가운데 정렬로 나타난다)
  • <td>: 왼쪽 정렬로 나타난다

<table style="background-color: white;">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>
  • border : 표 테두리 설정
    예) border: 1px solid black;
  • border-collapse: 표와 각 행과 열의 테두리가 하나로 합쳐져서 나오길 바랄 때
    예) border-collapse: collapse; 

border: 1px solid black;

 

border: 1px solid black; border-collapse: collapse; 

  • padding : cell 안의 내용과 각 테두리 간의 여백을 설정한다
    예) padding: 15px;
  • text-align
    예) text-align: left/ right
  • border-spacing: cell과 cell 사이에 여백을 추가한다
    예) border-spacing: 15px;
    참고) border-collapse: collapse; 일때는 사용할 수 없다
  • colspan

colspan을 이용해 열을 합친 모습

<table style="background-color: whitesmoke; width: 100%;">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
    </tr>
</table>
  • rowspan
  • caption: 표 이름을 설정 해준다, <table> 태그 바로 다음으로 사용 되어야 한다
    예) <caption>Contact info. </caption>

  • id: table에 하나의 style만 적용하고 싶을 때 사용한다
<!--t01표의 style-->
<head>
<style>
	#t01 {
  	width: 100%;
  	background-color: #f1f1c1;
	}
</style>
</head>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>