web前端课程表代码是什么 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Web前端课程表的代码可以用HTML和CSS来实现。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Web前端课程表</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h1>Web前端课程表</h1>
  <table>
    <tr>
      <th>时间</th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
    <tr>
      <td>8:00-9:00</td>
      <td>课程A</td>
      <td>课程B</td>
      <td>课程C</td>
      <td>课程D</td>
      <td>课程E</td>
    </tr>
    <tr>
      <td>9:00-10:00</td>
      <td>课程F</td>
      <td>课程G</td>
      <td>课程H</td>
      <td>课程I</td>
      <td>课程J</td>
    </tr>
    <!-- 添加更多课程 -->
  </table>
</body>
</html>

该代码使用<table>元素创建一个表格，使用<th>元素定义表头，使用<tr>元素定义表格的行，使用<td>元素定义表格的单元格。通过CSS样式设置表格的样式，如边框、填充、背景颜色等。

你可以根据实际需求，修改表格中的内容和样式，添加更多课程或调整课程时间。

1年前 0条评论

worktile

Worktile官方账号

Web前端课程表代码可以根据不同需求和技术栈有所不同，下面是一个基本的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Web前端课程表</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <h1>Web前端课程表</h1>
  <table>
    <tr>
      <th>时间</th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
    <tr>
      <td>8:00 - 9:00</td>
      <td>课程A</td>
      <td>课程B</td>
      <td>课程C</td>
      <td>课程D</td>
      <td>课程E</td>
    </tr>
    <tr>
      <td>9:00 - 10:00</td>
      <td>课程F</td>
      <td>课程G</td>
      <td>课程H</td>
      <td>课程I</td>
      <td>课程J</td>
    </tr>
    <!-- 更多课程表行 -->
  </table>
</body>
</html>

该代码使用HTML标记语言构建课程表的基本结构。
使用CSS样式表进行样式定义，使课程表显示为表格形式，并设置边框和内边距。
使用HTML标签<table>创建一个表格，使用<tr>表示表格的行，使用<th>表示表格的表头，使用<td>表示表格的数据。
在表头行中，使用<th>标签表示每一列的标题，表示星期几。
在课程表的每一行中，使用<td>标签表示每个时间段下的课程名称。

请注意，上述代码只是一个简单的示例，实际的课程表可能更加复杂，可能会根据实际需求进行更多的定制和样式定义。但是这段代码提供的基础结构可以作为一个起点，根据实际需求进行修改和扩展。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

编写web前端课程表代码需要使用HTML、CSS和JavaScript来实现。下面是一个简单的示例代码：

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <title>课程表</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>课程表</h1>
    <div id="schedule">
        <table>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
            <tr>
                <td>上午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>下午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>晚上</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（style.css）：

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

h1 {
    text-align: center;
}

#schedule {
    margin: 20px auto;
    width: 80%;
}

JavaScript部分（script.js）：

window.onload = function() {
    var table = document.querySelector("#schedule table");
    var cells = table.getElementsByTagName("td");

    for (var i = 0; i < cells.length; i++) {
        cells[i].onclick = function() {
            if (this.innerHTML === "") {
                var course = prompt("请输入课程名：");
                if (course !== null) {
                    this.innerHTML = course;
                }
            } else {
                var confirmClear = confirm("是否要清除课程？");
                if (confirmClear) {
                    this.innerHTML = "";
                }
            }
        };
    }
}

以上代码实现了一个简单的web前端课程表。用户可以通过点击单元格来输入或清除课程信息。每个单元格对应一个时间段的课程，星期和时间段由表格的行和列表示。整个课程表采用表格布局，通过CSS样式设置表格样式，javascript部分实现了单元格的点击事件处理逻辑。

1年前 0条评论