HTML Tables

김서하·2021년 3월 29일
0

HTML

목록 보기
3/6
테이블 생성 : <table></table> (<div>아래)
 행(가로) : <tr>로 추가 <tr> 다음 줄에 </tr> 계속 행 추가 시에는 밑에 줄에 계속 추가
  제목 : <th>로 추가 <tr> 안에
  ex) <th scope="col(열)/row(행)">~~~</th> 
   데이터 : <td>로 추가 <tr> 안에 (제목 추가 했으면 새로운 <tr>로 생성>
  테두리 : <border>로 값주기
  ex) table, td{
       border: 1px solid black;
      }
  <colspan> : 여러 열에 걸쳐있는 데이터가 포함되어있을 때
  ex) <td colspan="2">~~</td>처럼 ~~은 두 열을 사용하여 머리글에 걸쳐짐  
  <rowsapn> : 여러 행에 걸쳐있을 때
    
  테이블 헤드 : <thead>로 테이블의 열 머리글 분리
    
  테이블 본문 : <tbody> 테이블이 길 때 분할 가능, 테이블 모든 데이터 포함!
    
  테이블 바닥 글 : <tfoot> 하단부분 분할
    
  CSS로 스타일링~
    ex) table, th, td {
         border: 1px solid black;
         font-family: Arial, sans-serif;
         font-weight: 400;
         padding: 20px;
         text-align: center;
         width: 33.3333%;
        }
profile
개발자 지망생 서하입니당

0개의 댓글