<html>
<head>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td, #customers th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#customers th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#customers .c1 {
width: 500px;
background-color: #e0e023;
}
#customers .c2 {
width: 500px;
}
#customers .c3 {
width: 500px;
}
#customers tr.alt td {
color: #000000;
background-color: #EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th class="c1">Company</th>
<th class="c2">Contact</th>
<th class="c3">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbk�p</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>K�niglich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris sp�cialit�s</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
웹표준을 준수하며 코딩하는것은 중요하다.
한국의 경우 절대적인 익스플로러 우위에서 요즘은 다양한 부라우저를 사용한다.
망할놈의 액티브 때문에 익플 사용하고 싶지 않아도, 어쩔수 없이 또 익플을 쓰게된다.
점점더 어려워지는 웹문서 기술..
이제부터라도 시간나는대로 조금씩 공부해야만 뒤쳐지지 않는다.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
Example
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:
Example
width: 100%;
}
th {
height: 50px;
}
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Example
text-align: right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and content in a table, use the padding property on td and th elements:
Example
padding: 15px;
}
Table Color
The example below specifies the color of the borders, and the text and background color of th elements:
Example
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
'IT,WEB' 카테고리의 다른 글
| 자동분양홈페이지로 모바일홈페이지 쉽게 제작하는 방법 (0) | 2014.07.03 |
|---|---|
| 그누보드 5.0과 영카트 5.0으로 자동분양 홈페이지 업그레이드 완료 (0) | 2014.06.28 |
| 네이버 애드포스트 달고 블로그에 수익내기. (0) | 2014.06.08 |
| 왜 내가 쓴글은 검색에 노출이 안될까? (0) | 2014.06.08 |
| 주소창 앞에 나만의 아이콘달기 (0) | 2014.06.08 |
