Pin Me

How to Create a Rubric

written by: Joy Campbell•edited by: Christian Cawley•updated: 5/17/2011

Creating a rubric with tables is another web tool for teachers to add to their toolbox. Rubrics are used for assessments and designing rubrics is based on how a teacher will evaluate their students. This is beneficial for the teacher, student and parents.

  • slide 1 of 8

    Web Tools for Teachers

    Creating a rubric helps answer students’ questions “why did I get this grade. “ Designing rubrics are more than just a checklist; it is an authoritative rule that defines precise requirements along with adding a value to each level of criteria. Rubrics simplify teacher’s assessment of student’s work which is valuable not only to the students but also to parents and administration. A rubric, like a syllabus is another web tool for teachers. The syllabus is an outline of the main points for a course of study. And a rubric is short explanation of how an assignment will be evaluated.

  • slide 2 of 8

    Why Make a Rubric?

    Teachers create rubrics for a variety of reasons. One reason is that it allows the student to know how their work will be evaluated; another is for the teacher to be consistent when grading. Rubrics help to identify specific areas to determine the quality of work submitted and also helps to reduce grading time.

  • slide 3 of 8

    Appropriate Use for Tables

    A table is appropriate to use when creating an online rubric. Tables are intended for tabular data and separation of content from presentation is still possible through CSS. This separation allows for easy maintenance. Tables should be treated with the same usability techniques as content. Fonts should be easy to read, colors should be soft and the style should be the same as the rest of a web page.

    Creating a rubric template as a web tool for teachers can be easily updated with a few steps. Rubrics for assessments can be used for any activity a class might be completing. This rubric is based on the WebQuest article.

  • slide 4 of 8

    CSS Code

    Add the following code to the CSS file. “th” represents the headings and the code includes adding a bold font, white font and a color background.

    table, td, th { font: Verdana, Arial, Helvetica, sans-serif

    font-size:12px; }

    th { font-weight:bold; background-color:#5f3b42;;

    color:white; }

  • slide 5 of 8

    HTML Code

    Add the following code to the html file. The table has been centered align and is set to 100%. For the sample file this is 100% of the div “mainContent.” If this is place under the body html area it would span and adjust to the size of the browser. “tr” represents the table row and “td” represents the table data. Valign has also been added to align the text to the top of the row.

    Notice that a table heading has been added in place of the table data for the “Writing” topic that the rubric is based on. This helps for usability by allowing it to stand apart from the evaluation area. Soft colors are used to separate the columns for easy reading.

    <!-- Table Begins -->

    <table align="center" width="100%">

    <!-- Header Row -->

    <tr >

    <th width="131">Assignment</th>

    <th width="188">One Point</th>

    <th width="229">Two Points</th>

    <th width="177">Three Points</th>


    <!-- Row One Begins -->

    <tr >

    <th valign="top" bgcolor="#D9E1D9"><div align="center">Writing </div></th>

    <td valign="top" bgcolor="#FFFFCC">

    <p>Lots of spelling and grammar errors.</p>

    <p> Did not name anime style.</p>


    <td valign="top" bgcolor="#D9E1D9">

    <p> Little spelling and grammar errors.</p>

    <p> Anime style was named. </p>


    <td valign="top" bgcolor="#FFFFCC">

    <p> Little spelling and grammar errors. </p>

    <p> Included name of anime style and gave a insightful/descriptive view. </p>


    </tr> <!-- Row One Ends -->

    </table><!-- Table Ends -->

    Table rows and Table data 

  • slide 6 of 8


    To add another area to be graded – copy and paste the code between the rows, <tr> through </tr>. To add another column, copy and paste the table header <th> </th> for the top row and the table data for the rows beneath it <td> </td>. For a quick start download the files which include a CSS file and a HTML file.

    Resizing columns may be accomplished by changing the code “width” code or in Dreamweaver by holding the mouse between two columns and dragging.

    Drag to resize columns 

  • slide 7 of 8

    WebQuest and Assessment Rubrics for Teachers

    This concludes the WebQuest tutorials that started with creating a syllabus, then a WebQuest and a rubric as an evaluation tool. A rubrics will help to anwers questions for students on how they will be graded. For more information on creating online classes see "The Characteristics of a Good E-Learning Site."

  • slide 8 of 8

    Work Cited

    Images and Rubrics created by Joy Campbell

Creating an Online Course

Creating an Online Course article series covers the characteristics of a good e-learning site that is based on proven techniques, Lesson include creating a Syllabus, WebQuest and Rubrics. Future articles will cover using usability techniques in Blackboard. Images and an example file are included.
  1. How to Create a Syllabus in Dreamweaver
  2. Design Your Own Webquest: Tips & Sample Files
  3. How to Create a Rubric