CODEWITHSUNDEEP
htmlcssxhtml
stanigator
stanigator

Reputation: 10944

How to wrap the words within the tables in HTML?

I made this html file as instructed in a video course. However, for some reason, I'm not configuring the cell size properly despite playing around with CSS style sheet. Here is the code snippet for the table:

<table id="table1" cellspacing="40">
    <tr>
        <td><h3>Home</h3>"ksdjfkl;dajkfdl;sajfkldsjlsfl;saflklfas"<a href="about.html">more</a></td>
        <td><h3>About</h3>"dkfjakldfjdklsafjkldsjfvklzjvklz;cjv"<a href="about.html">more</a></td>
        <td><h3>Contact</h3>"jvkl;jkdlfjaklda;fjkdlsafjdlsfkd;"<a href="contact.html">more</a></td>
    </tr>
</table>

Here's the code snippet that's relevant to the table:

#table1{
width: 750px;
height: 250px;
table-layout: fixed;
margin-left: 20px;
}

#table1 td{
text-align: left;
background: #d8d8d8;
font-size: 14px;
padding: 15px;
border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px #000000;
-moz-box-shadow: 0px 0px 10px #000000;
}

#table1 h3{
text-align: center;
font-family: Pristina;
font-size: 20px;
}

This is the result of the page: Screenshot of Index Page

I have a feeling that I should be adding the settings in #table1 td{ ... }. However, I still have trouble with the appearance even after adding width = somepixels in #table1 td{ ... }. What would be your recommendations to fix it?

Thanks in advance!

Upvotes: 2

Views: 167

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201808

Define the logic you wish to apply to breaking your strings. Most probably “ksdjfkl;dajkfdl;sajfkldsjlsfl;saflklfas” etc. as in your question is not real data, so it is impossible to guess what logic should be applied. But if it is an actual example, or some cryptic code, you should probably allow line breaks after semicolons (only):

ksdjfkl;<wbr>dajkfdl;<wbr>sajfkldsjlsfl;<wbr>saflklfas

Using word-wrap: break-word is hardly ever appropriate, and certainly not appropriate for English or other Western languages.

To allow a break after a special character, use <wbr>. To allow hyphenation inside a natural-language word, use the soft hyphen (or the entity reference for it, &shy;).

Upvotes: 0

John Conde
John Conde

Reputation: 219894

Use CSS word-wrap property:

#table1 td {
     word-wrap: break-word;
}

Upvotes: 4

Related Questions