CODEWITHSUNDEEP
htmlcsshtml-table
AR24
AR24

Reputation: 13

I can't set border for an HTML table

I'm learning HTML and a little CSS. I've got a problem during setting table border for an HTML border. I type the CSS codes, also the width and height codes and text-alignment codes work fine but the border code doesn't work. Here is my codes:

<table>
  <style>
    table,
    th,
    td {
      text-align: left;
      border: 10px red;
      border-collapse: collapse;
      width: 800px;
      height: 100px;
    }
  </style>
  <tr>
    <th>Player LastName</th>
    <th>Player Jersey Number</th>
    <th>nationallity</th>
    <tr>
      <td>Reus</td>
      <td>11</td>
      <td>Germany</td>
      <tr>
        <td>Haaland</td>
        <td>9</td>
        <td>norway</td>
        <tr>
          <td>Kobel</td>
          <td>1</td>
          <td>Switzerland</td>
</table>

and here is the result in my web:result in my webpage

Upvotes: 0

Views: 1209

Answers (4)

iStealersn
iStealersn

Reputation: 11

Best of luck on your learning path of HTML & CSS.

When you are using 'Border Shorthand' always follow the syntax, your code is missing the border type. Reference here: https://www.w3schools.com/css/css_border_shorthand.asp

Use this CSS code:

table,
th,
td {
  text-align: left;
  border: 10px solid red;
  width: 800px;
  height: 100px;
}

Upvotes: 1

Johannes
Johannes

Reputation: 67738

You have to add the border style to your border definition (solid, dotted or other): border: 10px solid red;

(AND you should close your <tr> tags!)

table,
th,
td {
  text-align: left;
  border: 10px solid red;
  border-collapse: collapse;
  width: 800px;
  height: 100px;
}
<table>
  <tr>
    <th>Player LastName</th>
    <th>Player Jersey Number</th>
    <th>nationallity</th>
  </tr>
  <tr>
    <td>Reus</td>
    <td>11</td>
    <td>Germany</td </tr>
  </tr>

  <tr>
    <td>Haaland</td>
    <td>9</td>
    <td>norway</td>
  </tr>

  <tr>
    <td>Kobel</td>
    <td>1</td>
    <td>Switzerland</td>
  </tr>
</table>

Upvotes: 0

Frontend Dev Web Accessibility
Frontend Dev Web Accessibility

Reputation: 235

You did not mentioned border type:

Here is the updated css code, please use following css code

  table,th,td {
            text-align: left;
            border: 10px red solid;
            width: 800px;
            height: 100px;
        }

Upvotes: 0

User7007
User7007

Reputation: 361

You need to define the type of border. For example solid or dotted. See here for more info on the border property

<table>
  <style>
    table,
    th,
    td {
      text-align: left;
      border: 10px solid red;
      width: 800px;
      height: 100px;
    }
  </style>
  <tr>
    <th>Player LastName</th>
    <th>Player Jersey Number</th>
    <th>nationallity</th>
    <tr>
      <td>Reus</td>
      <td>11</td>
      <td>Germany</td>
      <tr>
        <td>Haaland</td>
        <td>9</td>
        <td>norway</td>
        <tr>
          <td>Kobel</td>
          <td>1</td>
          <td>Switzerland</td>
</table>

Upvotes: 0

Related Questions