legibility<\/strong> proximity by row : add more space between rows by column: add more space between columns similarity<\/strong> In HTML, there are two types of lists: ordered and unordered.<\/p>\n unordered lists<\/strong> in the html:<\/strong> in the css:<\/strong> in the browser:\u00a0<\/strong> ordered lists<\/strong> in the html:<\/strong> in the css:<\/strong> in the\u00a0browser:<\/strong> Lists:
\nUse your legibility skills: adjust font size, letter spacing, color and line height. Try to read the type. Is it easy to read? Adjust as needed.<\/p>\n
\n<\/strong>How is the data intended to be read?<\/p>\n
\n![\"tableByRow\"](\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/tableByColumn.jpg\")
<\/a><\/p>\n
\n<\/p>\n
\nUse similarity to separate headings from data. Be consistent with type treatment, units of measurement and alignment. Keep rules and lines to a minimum. Let the data be the most important element.<\/p>\n<\/a><\/p>\nLists<\/h2>\n
\nThe list items are marked with bullets. The bullets can be defined by list-style-type such as circle, square or none, or defined by an image:<\/p>\n
\n<ul>
\n<li>Coffee<\/li>
\n<li>Tea<\/li>
\n<li>Milk<\/li>
\n<\/ul><\/p>\n
\nul {
\nlist-style-type: none;
\nbackground-image: url(purpleBullet.png);
\nbackground-repeat: no-repeat;
\nbackground-position: 0px 5px;
\npadding-left: 14px; }<\/p>\n
\n<\/a>\u00a0Coffee
\n<\/a>\u00a0Tea
\n<\/a>\u00a0Milk<\/p>\n
\nOrdered list items are marked with numbers or letters. The bullets can be defined by list-style-type such as upper-roman, lower-alpha, etc.<\/p>\n
\n<ol>
\n<li>Coffee<\/li>
\n<li>Tea<\/li>
\n<li>Milk<\/li>
\n<\/ol><\/p>\n
\nol { list-style-type: lower-alpha; }<\/p>\n
\na. Coffee
\nb. Tea
\nc. Milk<\/p>\nexample:<\/h4>\n
table
\n<\/a>list<\/a><\/h4>\nexercise:<\/h3>\n
\n
resources<\/h4>\n
\nW3Schools : CSS Lists
\n<\/a>tables<\/a><\/p>\n