<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table style</title>
<style>
table th, table td { margin: 0px; padding: 8px;}
table{
border-top:3px solid;
border-bottom:1px solid;
border-collapse: collapse;
}
table th{
background-color: purple;
color:white;
border-bottom: 2px solid black;
font-size:1.4em;
}
table td { border-bottom: 1px dotted;}
caption { font-size:24px; margin: 5px;}
tbody > tr:nth-child(odd){background-color: lavender;}
tbody>tr:nth-of-type(even){background-color: rgb(214,158,210);}
tbody> tr:hover{background-color: yellow; cursor:pointer;}
</style>
</head>
<body>
<table>
<caption> table3. schools</caption>
<thead>
<tr>
<th>year</th>
<th>name</th>
<th>address</th>
</tr>
</thead>
<tbody>
<tr><td>1992</td><td>소망 유치원</td><td>경기 여주</td></tr>
<tr><td>1998</td><td>평화초등학교</td><td>서울특별시 송파구 문정동</td></tr>
<tr><td>2001</td><td>영광중학교</td><td>경기도 성남시</td></tr>
<tr><td>2004</td><td>희망고등학교</td><td>경기도 안산시</td></tr>
</tbody>
</table>
</body>
</html>1. **Table Structure**:
- The table is structured into a caption, a header (`<thead>`), and a body (`<tbody>`). This semantic structure not only organizes the data but also aids in accessibility and styling.
- The `<caption>` provides a title or explanation for the table, styled prominently to stand out.
- The `<thead>` section contains column headings (`<th>` elements), providing labels for the data columns.
- The `<tbody>` section contains the data rows (`<tr>` elements) with individual data cells (`<td>` elements).
2. **CSS Styling**:
- **Borders**: The table's top border is thicker than the bottom border, creating a strong visual foundation. `border-collapse: collapse;` ensures that borders between table cells are merged into a single border for a cleaner look.
- **Column Headings**: The `<th>` elements have a purple background, white text, and a solid bottom border, making the headings distinct from the data cells. The font size is increased to emphasize the headings.
- **Data Cells**: Dotted bottom borders on `<td>` elements subtly separate rows without overwhelming the data visually.
- **Row Styling**: Alternating row colors (`lavender` for odd rows and a pinkish tone for even rows) improve readability by visually distinguishing adjacent rows. A hover effect changes the row’s background to yellow, indicating that rows are interactive or highlightable.
3. **User Interaction**:
- The `:hover` pseudo-class applied to table rows enhances user interaction by providing immediate visual feedback when a row is hovered over, with the cursor changing to a pointer to suggest clickability.
### Key Points:
- The document effectively demonstrates how to use CSS to style an HTML table, making it more visually appealing and user-friendly.
- CSS properties like `border-collapse`, `background-color`, `color`, and pseudo-classes like `:nth-child` and `:hover` are utilized to enhance the table's design and interactivity.
- The table’s content, structured into a caption, headings, and data rows, is presented with a clear visual hierarchy and contrast, improving the overall readability.
### Possible Improvements:
- **Responsive Design**: For enhanced mobile usability, consider adding CSS media queries to adjust the table layout or font sizes on smaller screens, or even reformat the table into a more mobile-friendly structure.
- **Accessibility Enhancements**: Ensure the table remains accessible, especially with the use of color. Providing sufficient contrast and using semantic HTML where possible (such as `<th scope="row">` for row headers) can improve accessibility.
- **Further Styling**: Explore additional CSS properties or advanced techniques like CSS Grid or Flexbox for responsive table designs, or adding visual cues such as icons or tooltips for more information about the data.
'개념 > HTML+CSS' 카테고리의 다른 글
| CSS) CSS Style for Button States Example (0) | 2025.02.22 |
|---|---|
| CSS) CSS Customization for HTML Lists (0) | 2025.02.20 |
| CSS) Semantic Web Page Layout with CSS Styling (0) | 2025.02.18 |
| HTML) HTML Media Tag Usage Example (0) | 2025.02.16 |
| HTML) HTML Image and Figure Tag Example (0) | 2025.02.15 |