Skip to content

Css(table)

  • Web
  • Html
  • Css

August 08, 2022

Css(table)

๐ŸŸก ์ดˆ๊ธฐ์„ธํŒ…

* {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  width: 600px;
}
th,
td {
  border: 1px solid #ccc;
  padding: 10px;
}
<table>
  <tr>
    <th>๋ฒˆํ˜ธ</th>
    <th>์ œ๋ชฉ</th>
    <th>์ด๋ฆ„</th>
    <th>๋‚ ์งœ</th>
  </tr>
  <tr>
    <td>1</td>
    <td>์˜ค๋Š˜ ๋‚ ์”จ๊ฐ€ ์ฐธ์œผ๋กœ ์ข‹์Šต๋‹ˆ๋‹ค.</td>
    <td>ํ™๊ธธ๋™</td>
    <td>2012-03-05</td>
  </tr>
  <tr>
    <td>2</td>
    <td>์˜ค๋Š˜ ๋‚ ์”จ๊ฐ€ ์ฐธ์œผ๋กœ ์ข‹์Šต๋‹ˆ๋‹ค.</td>
    <td>ํ™๊ธธ๋™</td>
    <td>2012-03-05</td>
  </tr>
  <tr>
    <td>3</td>
    <td>์˜ค๋Š˜ ๋‚ ์”จ๊ฐ€ ์ฐธ์œผ๋กœ ์ข‹์Šต๋‹ˆ๋‹ค.</td>
    <td>ํ™๊ธธ๋™</td>
    <td>2012-03-05</td>
  </tr>
  <tr>
    <td>4</td>
    <td>์˜ค๋Š˜ ๋‚ ์”จ๊ฐ€ ์ฐธ์œผ๋กœ ์ข‹์Šต๋‹ˆ๋‹ค.</td>
    <td>ํ™๊ธธ๋™</td>
    <td>2012-03-05</td>
  </tr>
</table>

๐ŸŸก ํ…Œ์ด๋ธ” ์ฒ˜๋ฆฌ

  • ํ–‰ ๋‹จ์œ„๋กœ ์žก๋Š” ๋ฐฉ๋ฒ• (odd:ํ™€์ˆ˜, even:์ง์ˆ˜)
table tr:nth-child(odd) {
  background: #eee;
}
table tr:nth-child(even) {
  background: rgb(245, 209, 209);
}
table tr:first-child {
  background: orange;
}
table tr:nth-of-type(odd) {
  background: red;
}
table tr:nth-of-type(even) {
  background: gray;
}
  • ์—ด ๋‹จ์œ„๋กœ ์žก๋Š” ๋ฐฉ๋ฒ• = nth-child์™€ nth-of-type ๋ชจ๋‘ ์‚ฌ์šฉ ๊ฐ€๋Šฅ!
table td:nth-child(4n) {
  background: grey;
}
/*n์€ ๋ฐฐ์ˆ˜์˜ ์—ญํ• ์„ ํ•จ.*/
table td:nth-child(4n) {
  background: grey;
}
table td:nth-child(4n + 1) {
  background: darkcyan;
}
table td:nth-child(4n + 2) {
  background: darkolivegreen;
}
table td:nth-child(4n + 3) {
  background: darkgoldenrod;
}
Previous Post

Github ์‚ฌ์šฉ๋ฒ•(2)

Github ์‚ฌ์šฉ๋ฒ•(2)
Next Post

ํƒœ๊ทธ์˜ ๋ถ„๋ฅ˜ (Inline vs Block)

ํƒœ๊ทธ์˜ ๋ถ„๋ฅ˜ (Inline vs Block)

ยฉ 2023 Haeun Choi

  • Github
  • Contact