table_basics：通过HTML CSS进行表格练习

在网页设计领域，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是两个至关重要的技术。HTML用于创建网页结构，而CSS则负责页面的样式和布局。本实践项目"table_basics"旨在帮助你掌握如何使用HTML和CSS来创建和美化表格。 我们来探讨HTML中的表格元素。在HTML中，`<table>`标签是用来创建一个基本表格的。它包含了若干子元素，如`<tr>`（表格行），`<th>`（表头单元格）和`<td>`（数据单元格）。例如，创建一个简单的两行两列的表格可以这样写： ```html <table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table> ``` 接下来是CSS的运用。CSS允许你对表格的外观进行精细控制，包括颜色、边框、对齐方式等。例如，你可以设置表格的边框样式、宽度和颜色： ```css table { border-collapse: collapse; /* 合并边框 */ width: 100%; /* 设置表格宽度 */ } th, td { border: 1px solid black; /* 设置边框 */ padding: 8px; /* 单元格内边距 */ text-align: center; /* 文本居中 */ } ``` 除了基本样式，你还可以使用CSS选择器来单独定制特定的单元格、行或列。例如，要使第一列背景色为灰色，可以这样做： ```css td:first-child { background-color: lightgray; } ``` 此外，CSS3引入了更多的表格样式功能，如渐变背景、圆角边框等。比如，为表格添加圆角： ```css table { border-radius: 5px; /* 设置表格的圆角 */ } ``` 在实际项目中，你可能还需要处理表格的响应式设计，确保在不同设备上都能正常显示。这可以通过使用媒体查询（media queries）实现，根据屏幕尺寸调整表格布局。 "table_basics"练习将带你深入了解HTML和CSS在创建和美化表格方面的应用。通过这个练习，你会学到如何构建基本的表格结构，以及如何用CSS对其进行美化和自定义，从而提升网页设计能力。在"table_basics-main"文件中，你可以找到相关的代码示例和练习，动手实践以加深理解。