CSS로 테이블 스타일을 설정하는 방법은 무엇입니까? CSS로 테이블 스타일을 설정하는 방법
- 不言원래의
- 2018-08-18 14:16:105504검색
간단한 표가 때로는 단조롭게 느껴질 때도 있는데 CSS 표에 스타일을 추가하려면 어떻게 해야 할까요? 이 글에서는 CSS 테이블 스타일을 설정하는 방법을 소개합니다.
1. 간단한 테이블
table.html
<!doctype html><html><head>
<meta charset="utf-8">
<title>表格样式</title>
<link href="box.css" type="text/css" rel="stylesheet"></head><body>
<center>
<table class="class">
<caption>课程表</caption>
<tr>
<th>星期\课程</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th>1-2节</th>
<td>数学</td>
<td>语文</td>
<td>化学</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<th>3-4节</th>
<td>英语</td>
<td>物理</td>
<td>化学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<th>5-6节</th>
<td>数学</td>
<td>物理</td>
<td>体育</td>
<td>化学</td>
<td>美术</td>
</tr>
<tr>
<th>7-8节</th>
<td>数学</td>
<td>美术</td>
<td>化学</td>
<td>英语</td>
<td>体育</td>
</tr>
<tr>
<th>9-10节</th>
<td>生物</td>
<td>美术</td>
<td>生物</td>
<td>英语</td>
<td>物理</td>
</tr>
</table>
</center>
</body></html>2. 테두리 병합: boder-collapse 속성 값: separate; (별도, 기본값) )
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
}
3. 테두리 간격(전제: border-collapse:separate;)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:collapse;
}
4 테이블 제목 캡션 쪽
속성의 위치를 설정합니다. 값:
상단;//기본값
하단;
왼쪽
맞습니다. bTable.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
}5, 셀 개체의 너비가 셀에 정의된 너비를 초과하는 경우 Table-Layout:Fix를 사용하여 테이블의 너비를 유지할 수 있습니다. 고정(고정 너비) table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
caption-side:bottom;
}관련 권장 사항: CSS 제어 테이블 style_html/css_WEB-ITnose
CSS+DIV 웹 페이지 스타일 및 레이아웃 설정 양식과 tables_html/css_WEB- ITnose
에 능숙함위 내용은 CSS로 테이블 스타일을 설정하는 방법은 무엇입니까? CSS로 테이블 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.