How to set border width in table?

  • Resolved luofeiyu

    (@luofeiyu)


    8 years, 2 months ago

    I found that some properties can’t be used in wordpress.
    The effect below is what i wanted in wordpress.

    View post on imgur.com

    To edite in Text mode in wordpress.

    <table border=”4″ bordercolor=”red”>
    <tbody>
    <tr>
    <td>test</td>
    <td>bash</td>
    <td>vim</td>
    </tr>
    </tbody>
    </table>

    I found that **border=”4″ bordercolor=”red”** can’t work when to publish.
    What i get is

    View post on imgur.com

    How to get the desired effect in my wordpress?

    • This topic was modified 8 years, 2 months ago by luofeiyu.
    • This topic was modified 8 years, 2 months ago by luofeiyu.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Use proper CSS to style tables. See https://css-tricks.com/complete-guide-table-element/, among other guides.

    To add CSS: If you are using WordPress 4.7, use the “Custom CSS” option in the customizer. If your theme has a custom CSS option, use that to add the CSS shown above. If not, install the plugin Simple Custom CSS. Or, if you have Jetpack installed, enable its Custom CSS module.

    Learn the Chrome Developer Tools to help you see and test changes to your CSS.

    lisa

    (@contentiskey)

    alternative: make your style changes in style.css file in child theme or by using a CSS editor plugin.

    decide on styles for your border for your table rows(tr) and columns(td)
    border-width
    border-color
    border-style

    in your example, it looks like might be a combination of border and outline

    @luofeiyu,

    Here is an example of adding style to a HTML table:

    <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 4px solid red;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Test Column 1</th>
    <th>Test Column 2</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

    Simply put the CSS code that is inside <style> in your theme’s stylesheet.

    @luofeiyu – Did you try the code I provided above?

    Let me know if you need help or have any questions.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to set border width in table?’ is closed to new replies.

Tags