[HTML 테이블(Table)] #03 colspan, rowspan, 그리고 테이블 스타일 지정하기
·
Web Front/HTML
안녕하세요 토스트데브입니다!이번 시간에는 HTML 테이블에서 셀을 병합하는 속성인 colspan, rowspan과 함께 기본적인 스타일링 방법까지 함께 알아보겠습니다.표를 좀 더 예쁘고 유용하게 만들기 위한 핵심 내용이니 꼭 기억해주세요! 📌 1. colspan 속성: 열(가로) 병합하기colspan은 하나의 셀이 가로로 여러 열을 차지하게 만들어주는 속성입니다.✅ 사용 예제 회원 정보 이름 홍길동 "회원 정보" 셀이 두 개의 열을 병합해 넓게 표시됩니다.colspan="2"는 두 칸을 하나로 합치겠다는 의미입니다. 📌 2. rowspan 속성: 행(세로) 병합하기rowspan은 하나의 셀이 세로로 여러 행을 차지하게 만들어주는 속성입니다.✅ 사용 예제 이름..
[HTML 테이블(Table)] #02 <tr>, <td>, <th> 태그의 차이와 사용법
·
Web Front/HTML
안녕하세요 토스트데브입니다!HTML에서 테이블을 만들 때 가장 많이 등장하는 세 가지 태그가 바로 , , 입니다.처음 테이블을 접하신 분이라면 이 태그들이 헷갈릴 수 있는데요, 이번 글에서는 각각의 역할과 차이점, 그리고 실전 예제를 통해 깔끔하게 정리해드리겠습니다! 📋 1. 태그 - "테이블의 행(Row)"tr은 table row의 줄임말로, 테이블의 한 줄을 의미합니다.그 안에 셀(cell)이 들어가며, 나 태그를 포함합니다. 홍길동 30 개발자✔ 하나의 안에는 여러 개의 셀( 또는 )이 들어갑니다. 📦 2. 태그 - "일반 데이터 셀"td는 table data의 줄임말로, 일반적인 데이터가 들어가는 셀입니다.기본적으로 왼쪽 정렬과 일반 글꼴로 표시됩니다.HTML95점 🎯 3...
[HTML 테이블(Table)] #01 <table>, <thead>, <tbody>, <tfoot> 구조로 웹 표를 표현하자
·
Web Front/HTML
안녕하세요 토스트데브입니다.오늘은 HTML에서 데이터를 구조화해서 표현할 수 있는 아주 강력한 태그인 요소와 그 하위 구조인 , , 태그에 대해 자세히 알아보겠습니다. 📌 1. 태그란?HTML에서 표를 만들기 위한 기본 태그입니다.행과 열로 구성된 정보를 시각적으로 깔끔하게 정리할 때 사용되며, 통계, 가격표, 일정표 등 다양한 데이터 표현에 활용됩니다. 이름 나이 직업 홍길동 30 개발자 🧱 2. 테이블의 기본 구성 요소태그설명표 전체를 감싸는 태그 (table row)테이블의 한 행(row)을 나타냄 (table header)제목 셀, 기본적으로 굵은 글씨 & 가운데 정렬 (table data)일반 데이터 셀 🧩 3. 구조화된 테이블: ,..