1. the *last row* should be rowspan by 2, 
the border of the table does not show (only the last row) in Firefox
but in chrome it show only one row (it should be two because rowspan = 2)
2. also, why chrome does not display the .php files directly after you do some changes in css? (the effects)

i included my css code, not all just the layout and the code of the table

```css
* {
  margin: 0;
  padding: 0;
  font-family: "Palatino Linotype", "Times New Roman", Helvetica, sans-serif;
}

/* Header design */

#header nav {
  /* so when the users scroll the page the menu will be fixed */
  position: fixed;
  width: 100%;
  /*it is like the border to the menu */
  height: 70px;
  /*  */
  background-color: #273746;
  z-index: 3;
}

.webname {
  /* to be at the same row like links */
  line-height: 70px;
  color: white;
  font-family: Verdana, Helvetica, sans-serif;
  font-variant: small-caps;
  margin-left: 30px;
  font-weight: bold;
  letter-spacing: 2px;
  /* z-index:4; */
}

#header ul {
  /* make the menu to the right of the page */
  float: right;
}

#header ul li {
  list-style: none;
  display: inline-block;
  /* the height of the line */
  line-height: 70px;
  /* to make no spaces between the boxes in the menu */
  float: left;
  /* z-index:2; */
}

#header a {
  /* to be able to click the link 
     even if the mouse is not directly on the text*/
  display: block;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  padding: 0 40px;
  color: #FDFEFE;
}

#header a:hover {
  background-color: #EC7063;
}

/* Header design ends */

/* contents design */

html,
body {
  height: 100%;
}

p {
  color: black;
}

#outer_container {
  height: auto !important;
  height: auto;
  min-height: 100%;
  /* real browsers */
}

#content_container {
  /* insert a descrtiption  */
  width: 1000px;
  margin: 0 auto;
  /*
     background-image:url('../images/art.jpg');
     background-repeat:no-repeat;
     */
  /* space from the top of the  */
  padding-top: 100px;
  /* scroll bar */
  overflow: auto;
  /* of the whole page*/
  height: auto;
}

.artTable,
th,
td {
  width: 700px;
  border-collapse: collapse;
  border: 1px solid black;
  text-align: center;
  margin: 10px;
}
```

```html
<div id="content_container">

  <br>
  <table class="artTable">

    <caption>Most Popular Artists in the world</caption>

    <thead>
      <tr>
        <th colspan="2">Full Name</th>
        <th> Type of Art </th>
        <th> Most popular work </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Van </td>
        <td>Gogh </td>
        <td> Painter</td>
        <td>Starry night</td>
      </tr>

      <tr>
        <td>Colette</td>
        <td> Peters </td>
        <td> Cake designer</td>
        <td>The Art of Cake decorating </td>
      </tr>

      <tr>
        <td>Dennis </td>
        <td> Ritchie</td>
        <td>Programmer </td>
        <td>C (Programming Languange) </td>
      </tr>

      <tr>
        <td rowspan="2" colspan="4">Art Surrounds Us</td>

      </tr>
    </tbody>

  </table>
  <br>
</div>
```