设计一个页面，外观如图3.1所示。要求：表格中的数据来自Vue实例中的定义的对象数组courses

，表格中应包含课程名称、授课教师、学分、上课时间和上课地点等信息。

<template>
  <div class="container">
    <h1 class="title">课程表</h1>
    <table class="table">
      <thead>
        <tr>
          <th>课程名称</th>
          <th>授课教师</th>
          <th>学分</th>
          <th>上课时间</th>
          <th>上课地点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="course in courses" :key="course.id">
          <td>{{ course.name }}</td>
          <td>{{ course.teacher }}</td>
          <td>{{ course.credit }}</td>
          <td>{{ course.time }}</td>
          <td>{{ course.place }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courses: [
        {
          id: 1,
          name: 'Web开发',
          teacher: '张三',
          credit: 3,
          time: '周一 9:00-11:30',
          place: '教学楼101',
        },
        {
          id: 2,
          name: '算法设计',
          teacher: '李四',
          credit: 4,
          time: '周三 13:30-16:00',
          place: '教学楼201',
        },
        {
          id: 3,
          name: '数据库原理',
          teacher: '王五',
          credit: 3,
          time: '周五 9:00-11:30',
          place: '教学楼301',
        },
      ],
    };
  },
};
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.title {
  text-align: center;
}
</style>