Cascading Style Sheets: Tutorial - Page 08

HTML Tables

<table>, <tr> and <td> tags are used for creating tables, table rows and table cells, respectively. Use these properties to change their appearance. Note: the table attributes cellpadding and cellspacing have been removed from HTML5.

Display Settings

There are two different types of boxes — inline and block — that match the two types of tags — inline and block-level tags.

Block-level tags create a line break before and after it. Example block-level tags are <div>, <p>, <h1> through <h6>, <table>, <ul>, <ol>, <li>, <blockquote>, etc.

Inline tags appear in the same line as the other content around them. Example inline tags are <a>, <img>, <strong>, <em>, <i>, <cite>, <b>, <span>, <s>, etc.

To change this behavior for any tag type, modify the display property.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

Notice that the display: none; value completely hides the element.

Learn how to display images with an example of a flexbox.

Comment