html tutorial - How to set table cellpadding and cellspacing in CSS - html5 - html code - html form




Answer: Use the CSS padding and border-spacing property

    You can simply set padding within the table cells victimization the CSS padding property, a tables cellpadding attribute is valid way to manufacture an equivalent result.

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>Set Cellpadding in CSS</title>
      <style type="text/css">
          table, th, td{
              border: 2px solid #666;
          }
          table th, table td{
              padding: 15px; /* Apply cell padding */
          }
      </style>
      </head>
      <body>
          <table>
              <thead>
                  <tr>
                      <th>Row No</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Email</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>1</td>
                      <td>Clark</td>
                      <td>Kent</td>
                      <td>[email protected]</td>
                  </tr>
                  <tr>
                      <td>2</td>
                      <td>Peter</td>
                      <td>Parker</td>
                      <td>[email protected]</td>
                  </tr>
                  <tr>
                      <td>3</td>
                      <td>John</td>
                      <td>Rambo</td>
                      <td>[email protected]</td>
                  </tr>
              </tbody>
          </table>
      </body>
      </html>

      Similarly, you'll use the CSS border-spacing property to use the spacing between adjacent table cell borders just like the cellspacing attribute. However, so as to work border-spacing the value of border-collapse property muse be separate, that is default.

      Example

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>Set Cellspacing in CSS</title>
        <style type="text/css">
            table{
                border-collapse: separate;
                border-spacing: 10px; /* Apply cell spacing */
            }
            table, th, td{
                border: 2px solid #666;
            }
            table th, table td{
                padding: 5px; /* Apply cell padding */
            }
        </style>
        </head>
        <body>
            <table>
                <thead>
                    <tr>
                        <th>Row No</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Clark</td>
                        <td>Kent</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Peter</td>
                        <td>Parker</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>John</td>
                        <td>Rambo</td>
                        <td>[email protected]</td>
                    </tr>
                </tbody>
            </table>
        </body>
        </html>

        Related Searches to How to set table cellpadding and cellspacing in CSS