[HTML] 웹 프론트엔드 개발 기술 15 (HTML5, CSS3, JavaScript) table, bordercolorlight, 프레임, valign, rowspan, colspan - 야옹야옹 그림 웹 페이지

설계 변수 테이블의 모든 태그와 속성을 마스터하세요

테이블 행 마커의 속성과 설정 방법을 숙지하세요.

표 셀의 교차 행 및 교차 열 속성을 설정하는 방법을 익히십시오.

테이블 중첩 방법을 마스터하세요.

테이블에 다양한 페이지 요소를 포함하는 방법을 알아보세요.

간단한 웹 페이지 레이아웃을 위해 테이블을 사용하는 방법을 알아보세요.

시트

표는 웹 디자인과 제작에 없어서는 안 될 요소로, 페이지에 그림, 텍스트, 데이터, 양식 요소를 간결하고 명확하며 효율적이고 빠르게 순서대로 표시하여 아름다운 페이지를 디자인할 수 있게 해줍니다.

테이블 마크

테이블 마크업 - 구문

lHTML 에서는 <table></table> 태그를 사용하여 테이블 을 생성합니다.

   <테이블>

        <caption> 표 제목 삽입 </caption>

       <tr> _ _

           < 일 ></ 일 > >< 일 ></ 일 > >< 일 ></ 일 > …

      </tr> _ _

      <tr> _ _

           <td ></td> <td ></td> <td ></td> …

      </tr> _ _

</table>

l 문법 설명

   <table></table> 태그는 표 삽입을 의미하고 , <tr></tr>는 행 삽입을 의미하며 , <td> </td>는 열 삽입을 의미하고, <th> </th>는 헤더 삽입을 의미 합니다 .

테이블 속성 설정

테이블은 웹 페이지 파일의 레이아웃에 있어서 중요한 요소로, 웹 페이지를 만드는 과정에서 웹 페이지의 테이블에 대한 일부 설정을 해야 하는 경우가 많습니다. 테이블에 대한 설정은 본질적으로 테이블 표시 속성에 대한 설정입니다. .

1. 테이블 의 테두리 속성 - border

2. 테두리 색상 - 테두리 색상

3. 밝은 테두리 의 색상 -- bordercolorlight

4. 어두운 테두리 색상 - bordercolordark

5. 배경색 —bgcolor _

6. 배경 이미지 - 배경

7. 테이블 너비 및 높이 - 너비/높이

8.테이블 정렬 속성 -align

테이블 속성을 사용하여 테이블 테두리 선을 설정하고 테이블을 아름답게 만듭니다.

기본 구문:

<테이블 테두리 "" bordercolor = "" bordercolorlight "" align= " 중앙 " bordercolordark = "" > </table >

표 테두리 스타일 속성

설명: <테이블 프레임=” ” 규칙=” ”> </table >

프레임: 표 테두리 스타일 설정, 규칙: 표 내부 테두리 스타일 설정

표 셀 간격 및 셀 여백 속성

기본 구문:

      <테이블 셀 간격 =“5px” cellpadding = “5px” > </table >

    cellspacing : 테이블의 셀과 셀 사이의 간격을 설정하며 , 테이블 레이아웃이 너무 촘촘하게 보이지 않도록 기본값은 2px 입니다.

    cellpadding : 셀 내용과 테두리 사이의 거리를 설정합니다.

테이블을 가로로 정렬

<!-- edu_11_3_4.html -->
……
<body>
<div id="div1" class="">	
<table align="left"  border="2">
  <csaption>学生信息表(左对齐)</caption>
  <tr>
    <td>王小品 </td>
    <td>商学院 </td>
    <td>110204</td>
  </tr>
  <tr>
    <td>李白 </td>
    <td>机械学院 </td>
    <td>100244</td>
  </tr> 
</table>
</div>
……

<table align="center"  border="2"> </table>

테이블 행 속성 설정

테이블 행 tr 태그의 속성은 테이블의 특정 행의 스타일과 해당 속성 설정을 설정하는 데 사용됩니다.

테이블 행 속성 - 설정

테이블 행 내용의 가로 정렬 속성

    < tr align="왼쪽 | 가운데 | 오른쪽 "> </ tr >

  테이블 행 내용 의 수직 정렬 속성

    < tr valign ="상단 | 중간 | 하단 "> </ tr >

예: < tr align=" 왼쪽"valign = "가운데 "> </ tr >

셀 속성 설정

테이블 열 태그 td 의 속성은 테이블 셀의 표시 스타일을 설정할 수 있습니다. 일반적으로 사용되는 속성은 다음 표에 나와 있습니다. 셀의 색상, 테두리 및 정렬 속성은 행 tr 태그와 동일합니다.

셀 속성 설정 - 셀은 행과 열에 걸쳐 있습니다.

<td> 의 속성은 테이블의 특정 셀의 속성을 설정하는 데 사용됩니다 .

셀 교차 행 행 범위 ( 행 교차 병합 - 수직 병합 )

셀 범위 colspan ( 교차 열 병합 - 가로 병합 )

테이블 중첩

테이블 중첩은 일반적으로 사용되는 페이지 레이아웃 방법입니다. 표 중첩을 사용하면 더욱 복잡하고 아름다운 페이지 효과를 디자인할 수 있습니다. 일반적인 상황에서 테이블 중첩을 사용할 때 테이블을 너무 많이 사용하면 안 됩니다. 그렇지 않으면 웹 사이트 액세스 속도가 느려집니다. 테이블 중첩은 일반적으로 셀 내에 중첩된 테이블을 사용합니다.

숙제

웹 페이지 제목: 컴퓨터 견적 양식

표 테두리는 3px이고 실선 색상은 "#ff6600"입니다.

셀 테두리 1px 실선 색상은 "#ff9900"입니다.

모든 이미지의 크기는 너비 120px, 높이 120px입니다.

팁: ¥-RMB 기호

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算机报价表</title>
<style>
	caption{
		font-size:20px;
		font-weight:bold;
	}
	table{
		border:3px solid #f60;
	}
	img{width:120px;
	height:120px;
	}
	td{
		border:1px solid #f90;
	}
</style>
</head>

<body>
<table>
	<caption>计算机报价单</caption>
    <tr>
    	<th>类型</th>
        <th>型号</th>
        <th>价格</th>
        <th>图片</th>
    </tr>
   <tr>
	<td rowspan="3">笔记本</td>
    <td>宏基(Acer)AS4552-P362G32MNCC</td>
    <td>&yen;2799</td>
    <td><img src="images/Acer.jpg"></td>
    </tr>
    <tr>
        <td>戴尔(Dell)14VR-188</td>
        <td>&yen;3499</td>
        <td><img src="images/Dell.jpg"></td>
    </tr>
    <tr>
        <td>联想(LenovoG470AH2310W42G500P7CW3(DB)-CN</td>
        <td>&yen;4149</td>
        <td><img src="images/Lenovo.jpg"></td>
    </tr>
    <tr>
        <td rowspan="2">台式</td>
        <td>戴尔家用(DELL)I560SR-656</td>
        <td>&yen;3599</td>
        <td><img src="images/DellT.jpg"></td>
    </tr>
    <t>
        <td>宏图奇眩(Hiteker)HS-5508-TF</td>
        <td>&yen;3399</td>
        <td><img src="images/Hiteker.jpg"></td>
    </tr>
</table>
</body>
</html>

웹페이지 제목 : 회원가입

모든 컨트롤에는 name 속성 세트가 있어야 하며 라디오 및 다중 선택 버튼에는 value 속성 세트가 있어야 합니다.

텍스트 상자: 필수, 사용자가 입력 필드를 입력하라는 메시지를 설정합니다.

비밀번호 상자: 필수, 사용자가 입력 필드를 입력하라는 메시지를 설정합니다.

라디오 버튼 그룹, 기본적으로 남성이 선택됨

확인 버튼, 항목 2와 3이 기본으로 선택됩니다.

파일 업로드 도메인 추가

여러 줄의 텍스트 필드, 10줄, 30열을 추가하고 기본 텍스트 정보를 설정합니다.

제출 버튼, 재설정 및 일반 버튼(새 회원 등록)을 추가하고 새 회원 버튼의 onClick 속성을 다음으로 설정합니다: οnclick="alert('Register new user');"

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
<style>
	input{font-family:Arial, Helvetica, sans-serif;}
</style>
</head>

<body>
<form name="register" method="post" action="http://localhost/testform">
	<h1>会员注册</h1>
    <hr>
    <div>用户名：<input type="text" name="username" required placeholder="请输入用户名"></div><br/>
    <div>密&emsp;码：<input type="password" name="passw" required placeholder="请输入密码"> </div><br/>
    <div>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女</div><br>
    <div>你通过哪些渠道了解到我们的产品：<br/><input type="checkbox" name="know" value="c1">朋友推荐<input type="checkbox" name="know" value="c2" checked>搜索引擎 <input type="checkbox" value="c3" name="know" checked>媒体宣传<input type="checkbox" value="c4" name="know">其他</div><br/>
    <div>上传个人照片<input type="file" name="poto"></div><br/>
    <div>个人简介：<br><textarea rows="10" cols="30">这个人很懒，什么也没有留下</textarea></div><br/>
    <div><input type="submit" value="提交" name="submit"> <input type="reset" value="重置" name="reset"> <input type="button" value="注册新会员" name="regist" onClick="javascript:alert('注册新用户');"></div>
</form>
</body>
</html>

웹페이지 제목 : 목록 태그 적용

양식 이름은 select로 지정되고 양식 제출 방법은 post로 설정되며 양식 제출 URL은 http://localhost/testform으로 설정됩니다.

모든 목록 선택에는 이름 속성 세트가 있어야 하며, 모든 옵션에는 값 속성 세트가 있어야 합니다.

단순 목록 메뉴 의 "Cherry" 옵션을 비활성화 옵션으로 설정하세요 .

그림과 같이 그룹 목록 메뉴 에서 Apple과 Potato가 기본으로 선택되도록 설정합니다 .

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签的应用</title>
</head>

<body>
<h1>列表标签select的应用</h1>
<hr>
<form name="select" method="post" action="http://localhost/testform">
<p>简单下拉菜单（单选）：
<select name="food1">
	<option value="apple1">苹果</option>
    <option value="cherry1">樱桃</option>
    <option value="grape1">葡萄</option>
</select>
</p>
<p>简单列表菜单（多选）：
<select name="food2" size="3" multiple>
	<option value="apple2">苹果</option>
    <option value="cherry2" disabled>樱桃</option>
    <option value="grape2">葡萄</option>
</select>
</p>
<p>分组下拉菜单（单选）：
<select name="food3">
  <optgroup label="水果类">
	<option value="apple">苹果</option>
	<option value="banana">香蕉</option>
	<option value="grape">葡萄</option>
</optgroup>
<optgroup label="蔬菜类">
	<option value="pumpkin">南瓜</option>
	<option value="bean">四季豆</option>
	<option value="potato">土豆</option>
</optgroup>
</select>
</p>
<p>分组列表菜单（多选）：
<select name="food4" size="6" multiple>
  <optgroup label="水果类">
	<option value="apple">苹果</option>
	<option value="banana">香蕉</option>
	<option value="grape">葡萄</option>
</optgroup>
<optgroup label="蔬菜类">
	<option value="pumpkin">南瓜</option>
	<option value="bean">四季豆</option>
	<option value="potato">土豆</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>

요약하다

본 장에서는 디자인 형태의 모든 태그와 태그 속성을 주로 소개합니다.

테이블을 디자인할 때 테이블 정렬을 고려해야 합니다. 테이블의 정렬은 테이블 태그 의 align 속성 , 행 tr 태그 의 align 및 valign, 열(셀) td 태그 의 align 및 valign 의 세 가지 범주로 나뉩니다 . 이러한 속성의 설정을 CSS 스타일을 사용하여 정의하면 더 좋을 것입니다.

테이블의 배경색과 배경 이미지를 디자인할 때 효과를 더 쉽게 제어하려면 CSS 스타일 시트를 사용하는 것이 가장 좋습니다.

표의 셀 내용이 다르기 때문에 큰 이미지나 동영상 파일을 삽입할 경우 네트워크 지연이 매우 커져 웹 페이지가 쉽게 열리지 않아 웹 사이트의 정상적인 접속에 영향을 미칠 수 있습니다. 일반적으로 레이아웃에 테이블을 사용하는 경우 테이블 중첩을 사용하여 페이지 레이아웃을 구체화합니다. 테이블이 중첩되면 테이블이 셀에 포함되어야 합니다.

행복하시길 바랍니다, 건강하시길 바랍니다, 행복하시길 바랍니다, 마음에 드셨으면 좋겠습니다!

마지막으로 야옹팔로우, 야옹팔로우, 야옹팔로우를 하시면 더 재미있는 블로그를 보실 수 있습니다! ! !

야옹야옹야옹, 당신은 나에게 정말 중요해요!

[HTML] 웹 프론트엔드 개발 기술 15 (HTML5, CSS3, JavaScript) table, bordercolorlight, 프레임, valign, rowspan, colspan - 야옹야옹 그림 웹 페이지

머리말

시트

시트

테이블 마크

테이블 마크업 - 구문

테이블 속성 설정

표 테두리 스타일 속성

표 셀 간격 및 셀 여백 속성

테이블을 가로로 정렬

테이블 행 속성 설정

테이블 행 속성 - 설정

셀 속성 설정

셀 속성 설정 - 셀은 행과 열에 걸쳐 있습니다.

테이블 중첩

숙제

웹 페이지 제목: 컴퓨터 견적 양식

웹페이지 제목 : 회원가입

웹페이지 제목 : 목록 태그 적용

요약하다

추천