어제 오늘 내일

테이블의 행(row)에 마우스를 올릴 경우, 해당 행의 배경색을 변경하는 방법입니다. :hover css의 pseudo-class(의사 클래스)인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. 이 :hover를 사용하여, 마우스가 테이블의 특정 row에 올라갔을 때, 행 전체의 배경색을 변경할 수 있습니다. 마우스오버 시, 행(row) 배경색 변경 이름 나이 Anna 20 Tina 30 David 33 table, td, th { border: 1px solid black; border-collapse: collapse; } table tr:hover { background-color: GreenYellow; } table tr:hover { background-color: Gree..

테이블의 제목을 붙이기 위해 태그를 사용할 수 있습니다. 여기서는 이 캡션의 위치를 지정하는 방법을 알아보도록 하겠습니다. 캡션의 위치 지정 (caption-side) 캡션의 위치를 지정하기 위해 caption-side 속성을 사용할 수 있습니다. top : 캡션을 테이블의 위쪽에 배치합니다. bottom : 캡션을 테이블의 아래쪽에 배치합니다. 캡션 위쪽에 놓기 학생 이름 나이 Anna 20 Tina 22 table, td, th { border: 1px solid black; border-collapse : collapse; } caption { caption-side: top; } caption-side: top; caption-side 속성 값을 top으로 지정하여, caption을 테이블의 위쪽..

border-color table/tr/td 태그에 border-color 속성을 이용하여 테이블의 테두리 색상을 지정할 수 있습니다. border border는 테두리의 너비, 스타일, 색상을 지정할 수 있는 단축 속성입니다. border 속성 안에 다음과 같은 속성을 한번에 지정할 수 있습니다. border-width border-style border-color border 속성으로 border-color로 지정할 수 있으므로, border 속성을 이용해도 테이블의 테두리 색상을 변경할 수 있습니다. border-color 속성 사용해서 테두리 생상 지정하기 이름 나이 Anna 20 Tina 22 table, td, th { border-width: 1px; border-style: solid; b..

지난번에는 테이블 안의 글자를 정렬하는 방법을 알아보았습니다. [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모 hianna.tistory.com 이번에는, CSS를 사용해서 HTML 테이블을 가운데 정렬하는 방법입니다. 테이블 가운데 정렬하기 Product Price Apple 3000 Banana 2000 table { margi..

지난번에는 구구단을 출력하는 방법을 알아보았습니다. [Javascript] for문 이용해서 구구단 출력 [Javascript] for문 이용해서 구구단 출력 지난번에는 for문의 기본적인 사용방법을 알아보고, 별찍기 예제도 만들어 보았습니다. [Javascript] 반복문(1) - for [Javascript] for문을 이용해서 별찍기 이번에는 for문을 응용하여 구구단을 찍는 예제 hianna.tistory.com 이번에는 구구단을 테이블 형태로 만들어보겠습니다. 구구단 테이블 document.write(''); // header document.write(''); document.write(''); for(let i = 2; i

지난번에는 테이블의 행을 삭제하고 추가하는 방법을 알아보았습니다. [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) 이번에는 버튼을 클릭하여 테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다. 1. 테이블에 행 추가하기 - insertRow(), insertCell() 2. 테이블에 행 삭제하기 - deleteRow() 1. 테이블에 행 추 hianna.tistory.com 이번에는 버튼을 클릭 했을 때, 테이블의 행을 숨기거나, 보여주는 방법을 정리해 보겠습니다. display 스타일 속성 사용하여 행 숨기기/보이기 사과apple 오렌지orange 바나나banana function hideRow() { cons..

HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모두 가운데 정렬하기) 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 테이블 안의 글자의 가로 방향 정렬은 CSS의 'text-align' 속성을 사용하고, 속성값으로 'left', 'right', 'center'가 올수 있습니다. 기본 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; border-collapse : collapse; } table { width : 300px; height :..

기본 테이블 그리기 HTML에 아무런 스타일을 지정하지 않고, 태그만 사용해서 테이블을 그리면 테두리가 표시되지 않습니다. Product Price Apple 3000 Banana 2000 테이블에 테두리 표시하기 테이블의 테두리를 표시하기 위해서 HTML과 CSS의 border 속성을 사용할 수 있습니다. HTML의 border 속성 Product Price Apple 3000 Banana 2000 태그에 border 속성값을 1로 지정하였습니다. CSS의 border 속성 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; }; CSS의 border 속성을 '1px solid black'으로 정의하였습니다. 이때..

지난 번에는 테이블에 행(row)를 추가/삭제하는 방법을 알아보았습니다. 이번에는, 테이블에 열을 추가하고, 삭제하는 방법을 알아보도록 하겠습니다. 열(column) 추가하기 사과apple 오렌지orange 바나나banana function addColumn() { const table = document.getElementById('fruits'); for(let i = 0; i < table.rows.length; i++) { const newCell =table.rows[i].insertCell(-1); newCell.innerText = 'New'; } } document.getElementById('fruits'); 열을 추가할 테이블을 선택합니다. table.rows.length; 테이블의 행..

테이블 행 개수 구하기 Header Row 1 Row 2 Row 3 Footer const table = document.getElementById('myTable'); const totalRowCnt = table.rows.length; result.innerText = '전체 행 개수: ' + totalRowCnt + '\n'; const tbody = table.tBodies[0].rows.length; result.innerText += 'Tbody 행 개수 : ' + tbody; 전체 행 개수 table.rows.length; HTMLTableElement는 rows라는 속성을 가지고, 이 속성은 모든 element를 포함하는 HTMLCollection 객체를 리턴합니다. (, , 안의 모든 을..