CSS Mastery摘要(8)--Styling Forms and Data Tables

Tables also have a sizing algorithm for their cells, which we can control via the table-layout property.
By default, a value of auto is used, which basically leaves it up to the browser to determine widths of cells
based on their content. By changing it to fixed , any cell widths are determined based on the width of cells in

the first row of the table or any col or colgroup elements. This gives us more control via CSS.

Table cells also have a default padding in some browsers, which we’ll want to remove.

css的描述性导致了浏览器在实现过程中具有较大的自由度和不确定性，以及很多的折衷和妥协，从而导致了css代码充满了各种trick。

forms are often poorly designed and coded.
Perhaps one of the reasons for this is that forms have always been a bit of a pain to code. They have
a lot of moving parts and have traditionally been hard to style. This is because many form controls are
implemented as replaced content, meaning that controls like the arrow in the drop-down menu in a select
element isn’t actually represented by any HTML element. It’s more of a black box that the browser throws
in there whenever you declare a <select> tag in the markup. This is largely to ensure consistency with the
default UI controls of the operating system the user is currently on.

the font size inside input fields is defaults set to a smaller size than the normal text in the document.

There are two ways of creating buttons with HTML. First, there’s the input element with type set to
button, reset, or submit.
Then there is the button element, which can have the same type attribute values.
These two elements for buttons work the same way, and initially look the same. We recommend that
you use the button element for your buttons, as you can put other elements inside them (such as spans or
images) to help with styling.