HTML 테이블 지식 요약

小云云원래의: 2017-11-17 14:29:282024검색

프로그래머의 문에 들어서기 위해 우리가 거쳐야 할 길은 HTML입니다. 기본적인 HTML을 마스터해야만 다음 기술을 더 잘 배울 수 있습니다. 그래서 오늘은 HTML 테이블과 관련된 지식의 모든 측면을 공유하겠습니다.

1. 5d98712269cdc68a3bc984d3bacb188c 마크

　 a, 기본 형식 d1203f041011cb2d219dfa963459dd57 테이블 내용 f16b1740fad44fb09bfe928bcc527e08 b, 테이블 마크 속성

　 속성 : 테이블의 너비를 나타냅니다. 해당 값은 상위 요소의 픽셀(px) 또는 100%(%)일 수 있습니다. 높이 속성: 테이블의 높이를 나타내는 값은 픽셀(px) 또는 100%일 수 있습니다. parent 요소의 레벨 요소 비율(%)

　 Border 속성: 테이블의 바깥쪽 테두리 너비를 나타냅니다.

Align 속성: 테이블의 표시 위치, 왼쪽 값이 왼쪽에 표시됩니다. Center 에 표시됩니다. 중앙 오른쪽이 오른쪽에 표시됩니다. 기본 왼쪽

　 Cellspacing 속성: Cell time Spacing, 기본 2px, 단위 픽셀

　　cellpadding 속성: 셀 내용과 셀 테두리 사이의 표시 거리, 단위 픽셀

　 프레임 속성: 표시 거리를 제어합니다. table border

　　 void(기본값)는 테두리 없음을 의미합니다

　　 위는 위쪽 테두리만 의미합니다

　　아래는 아래쪽 테두리만 의미합니다

　　hsides는 위쪽 테두리와 아래쪽 테두리만 의미합니다

　　lhs는 왼쪽 테두리만 의미합니다

rhs는 오른쪽 테두리만 의미합니다

　　vsides는 왼쪽과 오른쪽 테두리만 의미합니다 Border

　　box에는 4개의 테두리가 모두 포함됩니다

　　border에는 4개의 테두리가 모두 포함됩니다

　rules 속성: 셀 사이에 구분선을 표시할지 여부와 방법을 제어합니다

　　none (기본값) 구분선 없음

　　all은 모든 구분선 포함을 의미합니다

　　rows는 행 구분선만 의미합니다

　　clos는 열 구분선만 의미합니다

　　groups는 행 조합 열 그룹 사이의 선만 구분하는 것을 의미합니다

　c, make a 간단한 웹 페이지 레이아웃

2 ,63bd76834ec05ac1f4c0ebbeaafb0994표시

　a, 언제 사용하나요? 사용 시기 표에 제목을 사용해야 하는 경우에는 fa2c71f54022ac490f77a8e6d217bce9 표시를 사용하면 됩니다

　b. 63bd76834ec05ac1f4c0ebbeaafb0994 속성의 삽입 위치는 f5d188ed2c074f8b944552db028f98a1 속성 바로 뒤, a34de1251f0d9fe1e645927f19a896e8 테이블 행 앞

　c, align 속성

　 Top: 제목이 테이블 상단에 배치됩니다. botton: 제목이 테이블에 위치함 하단

　　left: 제목이 테이블의 왼쪽에 위치함

　　right: 제목이 테이블의 오른쪽에 위치함

3, a34de1251f0d9fe1e645927f19a896e8 mark

　a는 테이블의 행을 정의합니다. 각 테이블 행에 대해 a34de1251f0d9fe1e645927f19a896e8...fd273fcf5bcad3dfdad3c41bd81ad3e5 태그로 구성되며, a34de1251f0d9fe1e645927f19a896e8 태그의 각 줄은 여러 0f2d6b6549b1008808c133931ec1a1c9 또는 b4d429308760b6c2d20d6300079ed38e 태그

b, 선택적 속성

레벨 설정 정렬 형식: align="color value"

　 하단: 상단에 정렬

상단: 하단에 정렬

중간: 정렬 중앙

4, b4d429308760b6c2d20d6300079ed38e

a, b6c5a531a458a2e790c1fd6421739d1c 및 b4d429308760b6c2d20d6300079ed38e는 모두 a34de1251f0d9fe1e645927f19a896e8 태그 내에 중첩되어야 하며 쌍으로 표시되어야 합니다. b. b4d429308760b6c2d20d6300079ed38e는 일반적으로 첫 번째 행이나 열에 위치하며, b6c5a531a458a2e790c1fd6421739d1c는 굵게 표시됩니다. 셀의 특정 데이터를 나타내는 데이터 마크

　d. 둘 다의 마크 속성은 동일합니다

　e, 속성

　bgcolor: 셀 배경 설정

　Align: 셀 배경 설정

　 valign: 셀 수직 정렬 설정

　 Width: 셀 너비 설정

　 Height: 셀 높이 설정

　　　rowspan: 셀이 차지하는 행 수 설정

　　clospan: 셀이 차지하는 열 수 설정

eg:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table width="960" height="250" border="1" cellpadding="10" frame="box" >
        <caption>表格的标题</caption>
    <tr bgcolor="#ccc">
        <th bgcolor="red">班级</th>
        <th>姓名</th>
        <th>年级</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>四年级一班</td>
        <td>张三</td>
        <td>16</td>
        <td>80</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>李四</td>
        <td>16</td>
        <td>70</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>王五</td>
        <td>16</td>
        <td>60</td>
    </tr>
    </table>
</body>
</html>

위 내용은 일부입니다. 가장 기본적인 html 테이블 관련 내용입니다. 위의 튜토리얼에 따라 테이블을 완성하시면 많은 이득을 얻으실 수 있을 것이라 믿습니다.

HTML 테이블 지식 요약

관련 기사