테이블 관련 구성 및 Javascript 연산 테이블, tr, td_HTML/Xhtml_Web 페이지 제작

좋은 효과를 주는 테이블 속성 설정:

코드 복사

코드는 다음과 같습니다.

< 테이블 cellSpacing="0" cellPadding="0" border='1' bordercolor="black"
style='border-collapse:collapse;table-layout:fixed'>

많은 사람들이 이런 경험을 합니다. td에 콘텐츠가 없거나 눈에 보이는 요소가 없으면 td의 테두리도 사라집니다. 해결책은 테이블에 border-collapse:collapse 스타일을 추가하는 것입니다.
일반 텍스트 잘림(인라인 및 블록에 적용):

코드 복사

코드는 다음과 같습니다:

.text-overflow{
display:block;/*인라인 객체를 추가해야 합니다*/
width: 31em;
word-break:keep-all;/* 줄 바꿈 없음*/
white-space:nowrap;/* 줄 바꿈 없음*/
overflow:hidden;/* 다음과 같은 경우 초과 내용을 숨깁니다. 내용이 너비를 초과합니다*/
text-overflow:ellipsis;/* 개체의 텍스트가 오버플로될 때 줄임표(...)를 표시합니다. Overflow:hidden;과 함께 사용해야 합니다. */
}

테이블의 경우 정의가 약간 다릅니다.

코드 복사

코드는 다음과 같습니다.

table{
width:30em;
table-layout:fixed;/* 테이블의 레이아웃 알고리즘만 고정으로 정의됩니다. , 아래의 td 정의가 작동할 수 있습니다. */
}
td{
width:100%;
word-break:keep-all;/* 줄 바꿈 없음*/
white-space:nowrap;/* 줄 없음 break* /
overflow:hidden;/* 내용이 너비를 초과하면 초과 내용 숨기기*/
text-overflow:ellipsis;/* 개체의 텍스트가 있을 때 줄임표(...)를 표시합니다. Overflows;는 Overflow :hidden과 함께 사용해야 합니다. */
}

Javascript 연산표, tr, td

코드 복사

코드는 다음과 같습니다.

table.moveRow(m,n)//테이블 행 교환(IE) m과 n 사이의 행을 순서대로 이동합니다.
table.deleteRow(index )// 행 삭제
table.insertRow(index)//인덱스 위치에 행을 삽입하고 TR을 반환
tr.insertCell(index)//셀을 삽입하고 TD를 반환
tr. deleteCell(index )
tr.rowIndex//테이블에서 tr의 위치를 ​​반환합니다.
td.cellIndex //tr에서 td의 위치를 ​​반환합니다