Html td do not wrap

HTML Tag

A simple HTML table, with two rows and four table cells:

More «Try it Yourself» examples below.

Definition and Usage

An HTML table has two kinds of cells:

The text in elements are bold and centered by default.

Browser Support

Attributes

Attribute	Value	Description
colspan	number	Specifies the number of columns a cell should span
headers	header_id	Specifies one or more header cells a cell is related to
rowspan	number	Sets the number of rows a cell should span

Global Attributes

Event Attributes

More Examples

Example

Example

How to add background-color to table cell (with CSS):

Example

How to set the height of a table cell (with CSS):

Example

How to specify no word-wrapping in table cell (with CSS):

Example

Example

How to set the width of a table cell (with CSS):

Example

How to create table headers:

Example

How to create a table with a caption:

Example

How to define table cells that span more than one row or one column:

Related Pages

Default CSS Settings

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Tag

All the rows in the table contain an equal number of cells, which is equivalent to the number of cells in the longest row. If there are less cells in a row, then the browser will automatically fill the row, placing empty cells at the end of it.

If you need to emphasize that there is no data in other cells, then create cell without content where it is necessary.

The cells added by browser have no borders, and if they go after each other, they will be shown as one integrated cell.

Syntax

The

tag comes in pairs. The content is written between the opening ( ) and closing (

) tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> style> table < width: 80%; margin: 30px auto; border-collapse: collapse; > tr < background-color: lightgrey; > tr:first-child < background-color: #1c87c9; color: #fff; > th, td < padding: 10px; border: 1px solid #666; > style> head> body> table> tr> th>Month th> th>Date th> tr> tr> td>March td> td>10.09.2018 td> tr> tr> td>June td> td>18.07.2018 td> tr> table> body> html>

Example of the HTML tag with the colspan attribute:

html> html> head> title>Title of the document title> style> table < width: 80%; margin: 30px auto; border-collapse: collapse; > tr < background-color: #e6ebef; > tr:first-child < background-color: #1c87c9; color: #fff; > tr:last-child < height: 60px; > tr:last-child td < background-color: #a3cced; > tr:last-child span < font-size: 14px; > th, td < padding: 10px; border: 1px solid #666; > style> head> body> table> tr> th>Company e-mail th> th>Date th> tr> tr> td> a href="#">[email protected] a> td> td>01.09.2017 td> tr> tr style="height:60px;"> td colspan="2" valign="bottom">[email protected]; strong>01.09.2017 strong> span>(received date) span> td> tr> table> body> html>

Result

Example of the HTML tag with the rowspan attribute:

html> html> head> title>Title of the document title> style> th, td < padding: 10px; border: 1px solid #666; > style> head> body> table style="width:80%; margin:30px auto; border-collapse:collapse;"> tr style="background-color:#1c87c9; color:#fff;"> th>Month th> th>Year th> tr> tr> td style="background-color:#e6ebef;">March td> td rowspan="2" style="background-color:#a3cced; text-align:center;">2014 td> tr> tr style="background-color:#e6ebef;"> td style="background-color:#e6ebef;">April td> tr> table> body> html>

layout issues

Attributes

Attribute	Value	Description
abbr	text	Defines an abbreviated version of the content in a cell, or an alternative text. (User-agents, such as speech readers, may present this description before the content itself). Not supported in HTML 5.
align	left right center justify char	Aligns the content in a cell. Not supported in HTML 5.
axis	category_name	Categorizes cells having similar content. Not supported in HTML 5.
background	background	Sets the background in a cell. Not supported in HTML 5.
bgcolor	rgb(x,x,x) #xxxxxx colorname	Defines the background color of a cell. Not supported in HTML 5.
bordercolor	bordercolor	Sets the color of the border. Not supported in HTML 5.
char	character	Aligns the content in a cell to a character. Is used only if attribute align=»char» . Not supported in HTML 5.
charoff	number	Sets the number of characters the content will be aligned from the character specified by the char attribute. Is used only if attribute align=»char» . Not supported in HTML 5.
colspan	number	Defines the number of columns a cell should span. The value of the attribute should be a positive integer. Default value is 1.
headers	header_id	Specifies one or more header cells (defined by the	tag) a standard cell is related to.
height	% pixels	Sets the height of a cell. Not supported in HTML 5.
nowrap	nowrap	Specifies that the content inside a cell should not wrap. Not supported in HTML 5.
rowspan	number	Specifies the number of rows a cell should span. The value of the attribute should be a positive integer. Default value is 1. It is not recommended to use values higher than 65534, as they will be clipped down to 65534.
scope	col colgroup row rowgroup	Defines the cells that the header (defined in the	) element relates to. Not supported in HTML 5.
valign	top middle bottom baseline	Specifies vertical alignment of the content inside a cell. Not supported in HTML 5.
width	% pixels	Sets the width of a cell. Not supported in HTML 5.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Источник

How to Wrap the Content of a Table Cell

As we know, the contents of a table can change its structure or dimensions. So, there can be several difficulties with table cells. For example, long words in a table cell may cause the cell width to increase, or long words may cross the cell borders. But you can avoid these by using word wrapping on the cell content.

In this snippet, we suggest two methods: either using the CSS word-wrap or word-break property.

Solution with the CSS word-wrap property

Use the border-collapse property set to «collapse» and table-layout property set to «fixed» on the element. Also, specify the width of the table. Then, set the word-wrap property to its «break-word» value for elements and add border and width to them.

Example of wrapping the content of a table cell with the word-wrap property:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; table-layout: fixed; width: 310px; > table td < border: solid 1px #666; width: 110px; word-wrap: break-word; > style> head> body> table> tr> td>1 td> td>What is Lorem Ipsum? td> td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. td> tr> tr> td>2 td> td>Why do we use it? td> td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. td> tr> table> body> html>

If you want to wrap a word on a new line, use the word-wrap property, but if you need to break it at any appropriate character, use the word-break property.

Solution with the CSS word-break property

Example of wrapping the content of a table cell with the word-break property:

html> html> head> title>Title of the document title> style> table < border-spacing: 0px; table-layout: fixed; margin-left: auto; margin-right: auto; width: 310px; > td < border: 1px solid #666; word-break: break-all; > style> head> body> table> tr> td>1 td> td>What is Lorem Ipsum? td> td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. td> tr> tr> td>2 td> td>Why do we use it? td> td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. td> tr> table> body> html>

Источник